Scrollspy
Whakahōu aunoatia te whakaterenga Bootstrap, whakarārangihia rānei ngā wāhanga rōpū i runga i te tūnga panuku hei tohu ko tēhea hononga e hohe ana i te tauranga tirohanga.
Pehea te mahi
He torutoru nga whakaritenga a Scrollspy hei mahi tika:
- Me whakamahi i runga i te waahanga Bootstrap nav , te roopu rarangi ranei .
- Ka hiahia a Scrollspy
position: relative;
ki te huānga e tuteia ana e koe, ko te tikanga ko te<body>
. - Ko nga punga (
<a>
) e hiahiatia ana me tohu ki tetahi huānga me teraid
.
Ina oti pai te whakatinanatanga, ka whakahōuhia e to nav me to roopu rarangi ingoa, ka nekehia te .active
akomanga mai i tetahi mea ki tetahi atu i runga i o raatau whaainga.
Nga ipu ka taea te panuku me te uru papapātuhi
Mena kei te mahi koe i tetahi ipu ka taea te panuku (i tua atu i te <body>
), me mau he height
huinga me overflow-y: scroll;
te tono ki runga—te taha o te tabindex="0"
urunga papapātuhi.
Tauira i roto i te navbar
Panuku i te waahi kei raro i te pae whakatere ka mataki i te huringa o te karaehe hohe. Ko nga taonga takaiho ka tohua ano.
Pane tuatahi
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Pane tuarua
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Upoko tuatoru
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Upoko tuawha
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Upoko tuarima
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>...</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>...</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>...</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>...</p>
</div>
Tauira me te nav kohanga
Ka mahi ano a Scrollspy me nga kohanga .nav
s. Mena he kohanga .nav
, .active
ka noho ano ona matua .active
. Panukuhia te waahi ki te taha o te pae whakaterenga ka matakitaki i te huringa o te akomanga hohe.
Te nama take 1
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Te nama take 1-1
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Te nama take 1-2
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Te nama take 2
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Te nama take 3
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Te nama take 3-1
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Te nama take 3-2
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
Tauira me te roopu-rarangi
Ka mahi ano a Scrollspy me .list-group
s. Panukuhia te waahi ki te taha o te roopu rarangi ka matakitaki i te huringa o te akomanga kaha.
Te nama take 1
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Te nama take 2
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Te nama take 3
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
Te nama take 4
Ko etahi ihirangi puri wahi tenei mo te wharangi scrollspy. Kia mahara ka panuku koe ki raro i te wharangi, ka tohuhia te hononga whakatere tika. Ka tukuruatia puta noa i te tauira waahanga. Ka taapirihia e matou etahi tauira tauira ki konei hei whakanui i te panuku me te miramira.
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<h4 id="list-item-2">Item 2</h4>
<p>...</p>
<h4 id="list-item-3">Item 3</h4>
<p>...</p>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>
Whakamahinga
Ma nga huanga raraunga
Kia ngawari te taapiri i te whanonga scrollspy ki to whakatere pae runga, taapiri atu data-bs-spy="scroll"
ki te huānga e hiahia ana koe ki te tutei (te nuinga ko te <body>
). Na ka taapirihia te data-bs-target
huanga me te ID, te karaehe ranei o te huānga matua o tetahi .nav
waahanga Bootstrap.
body {
position: relative;
}
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Ma te JavaScript
Whai muri i te taapiri position: relative;
i to CSS, waeahia te scrollspy ma te JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Ko nga whaainga ID ka taea te whakatau
Ko nga hononga Navbar me whai tohu id ka taea te whakatau. Hei tauira, <a href="#home">home</a>
me rite ki tetahi mea i roto i te DOM rite <div id="home"></div>
.
Ko nga huānga ūnga kore-kitea i arohia
Ko nga huānga whainga karekau e kitea ka waihotia, ka kore rawa e miramirahia o raatau taonga nav e rite ana.
Nga tikanga
whakamau
Ina whakamahi i te scrollspy me te taapiri, te tango ranei i nga huānga mai i te DOM, me waea koe ki te tikanga whakahou penei:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
tuku
Ka whakangaro i te panuku o tetahi huānga. (Tangohia ai nga raraunga rongoa i te huānga DOM)
getInstance
Tikanga pateko e taea ai e koe te tiki i te tauira scrollspy e hono ana ki tetahi huānga DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Tikanga pateko e taea ai e koe te tiki i te tauira scrollspy e hono ana ki tetahi huānga DOM, ki te hanga i tetahi mea hou mena kaore i arawhitia
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Kōwhiringa
Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-bs-
, penei i te data-bs-offset=""
.
Ingoa | Momo | Taunoa | Whakaahuatanga |
---|---|---|---|
offset |
tau | 10 |
Pika hei whakatiki mai i runga i te tatau i te waahi o te panuku. |
method |
aho | auto |
Ka kimihia ko tehea waahanga kei roto te huānga torotoro. auto ka kowhiria te huarahi tino pai ki te tiki taunga panuku. offset ka whakamahi i te Element.getBoundingClientRect() tikanga ki te tiki taunga panuku. position ka whakamahi i te HTMLElement.offsetTop me HTMLElement.offsetLeft nga taonga ki te tiki taunga panuku. |
target |
aho | ahanoa jQuery | Huānga DOM | Tautuhi huānga ki te tono Scrollspy mono. |
Nga huihuinga
Momo takahanga | Whakaahuatanga |
---|---|
activate.bs.scrollspy |
Ka puhipuhi tenei takahanga ki te huānga panuku i nga wa katoa ka whakahohehia e te scrollspy tetahi mea hou. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})