Scrollspy
Värskendage automaatselt Bootstrapi navigeerimist või loendirühma komponente kerimisasendi alusel, et näidata, milline link on praegu vaateaknas aktiivne.
Kuidas see töötab
Scrollspy lülitab .activeklassi ankur ( <a>) elementidel id, kui ankru viidatud elementi hrefkeritakse vaatesse. Scrollspyt on kõige parem kasutada koos Bootstrapi navigeerimiskomponendi või loendirühmaga , kuid see töötab ka kõigi praeguse lehe ankurelementidega. See toimib järgmiselt.
-
Alustamiseks on scrollspy jaoks vaja kahte asja: navigeerimist, loendirühma või lihtsat linkide komplekti ning keritavat konteinerit. Keritav konteiner võib olla
<body>või kohandatud element komplektigaheightjaoverflow-y: scroll. -
Keritavasse konteinerisse lisage
data-bs-spy="scroll"jadata-bs-target="#navId"kus on seotud navigeerimisenavIdkordumatu . Klaviatuurile juurdepääsu tagamiseksidlisage kindlasti ka a .tabindex="0" -
Kui kerite „luuramise” konteinerit,
.activelisatakse klass ja eemaldatakse seotud navigeerimisriba ankurlinkidest. Linkidel peavad olema lahendatavadidsihtmärgid, vastasel juhul neid ignoreeritakse. Näiteks<a href="#home">home</a>peab vastama millelegi DOM-is nagu<div id="home"></div> -
Sihtelemente, mis pole nähtavad, ignoreeritakse. Vaadake allpool jaotist Mittenähtavad elemendid .
Näited
Navibar
Kerige navigeerimisriba all olevat ala ja vaadake aktiivse klassi muutumist. Avage rippmenüü ja vaadake, et ka rippmenüü üksused esile tõstetakse.
Esimene pealkiri
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Teine pealkiri
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Kolmas pealkiri
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Neljas pealkiri
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Viies pealkiri
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
<nav id="navbar-example2" class="navbar bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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>
Pesastatud nav
Scrollspy töötab ka pesastatud .navs-ga. Kui pesastatud .navon .active, on ka selle vanemad .active. Kerige navigeerimisriba kõrval olevat ala ja vaadake aktiivse klassi muutumist.
1. punkt
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Pidage meeles, et JavaScripti pistikprogramm püüab kõigi nähtavate hulgast valida õige elemendi. Samaaegselt mitu nähtavat scrollspy sihtmärki võib põhjustada probleeme.
Punkt 1-1
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Pidage meeles, et JavaScripti pistikprogramm püüab kõigi nähtavate hulgast valida õige elemendi. Samaaegselt mitu nähtavat scrollspy sihtmärki võib põhjustada probleeme.
Punkt 1-2
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Pidage meeles, et JavaScripti pistikprogramm püüab kõigi nähtavate hulgast valida õige elemendi. Samaaegselt mitu nähtavat scrollspy sihtmärki võib põhjustada probleeme.
2. punkt
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Pidage meeles, et JavaScripti pistikprogramm püüab kõigi nähtavate hulgast valida õige elemendi. Samaaegselt mitu nähtavat scrollspy sihtmärki võib põhjustada probleeme.
Punkt 3
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Pidage meeles, et JavaScripti pistikprogramm püüab kõigi nähtavate hulgast valida õige elemendi. Samaaegselt mitu nähtavat scrollspy sihtmärki võib põhjustada probleeme.
Punkt 3-1
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Pidage meeles, et JavaScripti pistikprogramm püüab kõigi nähtavate hulgast valida õige elemendi. Samaaegselt mitu nähtavat scrollspy sihtmärki võib põhjustada probleeme.
Punkt 3-2
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Pidage meeles, et JavaScripti pistikprogramm püüab kõigi nähtavate hulgast valida õige elemendi. Samaaegselt mitu nähtavat scrollspy sihtmärki võib põhjustada probleeme.
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
<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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="item-1">
<h4>Item 1</h4>
<p>...</p>
</div>
<div id="item-1-1">
<h5>Item 1-1</h5>
<p>...</p>
</div>
<div id="item-1-2">
<h5>Item 1-2</h5>
<p>...</p>
</div>
<div id="item-2">
<h4>Item 2</h4>
<p>...</p>
</div>
<div id="item-3">
<h4>Item 3</h4>
<p>...</p>
</div>
<div id="item-3-1">
<h5>Item 3-1</h5>
<p>...</p>
</div>
<div id="item-3-2">
<h5>Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>
</div>
Nimekirja rühm
Scrollspy töötab ka .list-groups-iga. Kerige loendirühma kõrval olevat ala ja vaadake aktiivse klassi muutumist.
1. punkt
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
2. punkt
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 3
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 4
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
<div class="row">
<div class="col-4">
<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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
</div>
</div>
Lihtsad ankrud
Scrollspy ei piirdu ainult navigeerimiskomponentide ja loendirühmadega, seega töötab <a>see praeguse dokumendi kõigi ankurelementidega. Kerige ala ja vaadake .activeklassi muutumist.
1. punkt
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
2. punkt
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 3
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 4
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 5
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
<div class="row">
<div class="col-4">
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
<a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
<a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
<a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
<a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<h4 id="simple-list-item-1">Item 1</h4>
<p>...</p>
<h4 id="simple-list-item-2">Item 2</h4>
<p>...</p>
<h4 id="simple-list-item-3">Item 3</h4>
<p>...</p>
<h4 id="simple-list-item-4">Item 4</h4>
<p>...</p>
<h4 id="simple-list-item-5">Item 5</h4>
<p>...</p>
</div>
</div>
</div>
Mittenähtavad elemendid
Sihtelemente, mis pole nähtavad, ignoreeritakse ja nende vastavad navigeerimisüksused ei saa .activeklassi. Mittenähtavas ümbrises lähtestatud Scrollspy eksemplarid ignoreerivad kõiki sihtelemente. Kasutage seda refreshmeetodit jälgitavate elementide kontrollimiseks, kui ümbris muutub nähtavaks.
document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
})
Kasutamine
Andmeatribuutide kaudu
Scrollspy käitumise hõlpsaks lisamiseks ülemise riba navigeerimisse lisage data-bs-spy="scroll"element, mida soovite luurata (tavaliselt on see <body>). Seejärel lisage data-bs-targetatribuut mis tahes Bootstrapi komponendi idemaelemendi või klassi nimega ..nav
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
JavaScripti kaudu
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Valikud
Kuna suvandeid saab edastada andmeatribuutide või JavaScripti kaudu, saate valikule lisada valiku nime data-bs-, nagu näiteks data-bs-animation="{value}". Suvandite andmeatribuutide kaudu edastamisel muutke suvandi nime tõuketüüp „ camelCase ” asemel „ kebab-case ”. Näiteks data-bs-custom-class="beautifier"kasutage data-bs-customClass="beautifier".
Alates versioonist Bootstrap 5.2.0 toetavad kõik komponendid eksperimentaalset reserveeritud andmeatribuuti data-bs-config, mis mahutab lihtsa komponendi konfiguratsiooni JSON-stringina. Kui elemendil on atribuudid data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", on lõplik titleväärtus 456ja eraldi andmeatribuudid alistavad väärtused, mis on antud kuupäeval data-bs-config. Lisaks võivad olemasolevad andmeatribuudid sisaldada JSON-i väärtusi, nagu data-bs-delay='{"show":0,"hide":150}'.
| Nimi | Tüüp | Vaikimisi | Kirjeldus |
|---|---|---|---|
rootMargin |
string | 0px 0px -25% |
Ristmik Vaatleja juurMargin kehtivad ühikud kerimisasendi arvutamisel. |
smoothScroll |
tõeväärtus | false |
Võimaldab sujuva kerimise, kui kasutaja klõpsab lingil, mis viitab ScrollSpy jälgitavatele objektidele. |
target |
string, DOM-element | null |
Määrab elemendi, mida Scrollspy pistikprogrammi rakendada. |
threshold |
massiivi | [0.1, 0.5, 1] |
IntersectionObserver künnis kehtiv sisend, kerimisasendi arvutamisel. |
Aegunud valikud
Kuni versioonini 5.1.3 kasutasime offset& methodsuvandeid, mis on nüüd aegunud ja asendatud valikuga rootMargin. Tagasiühilduvuse säilitamiseks jätkame antud sõelumist offset, rootMarginkuid versioonis 6 see funktsioon eemaldatakse .
meetodid
| meetod | Kirjeldus |
|---|---|
dispose |
Hävitab elemendi scrollspy. (Eemaldab DOM-elemendile salvestatud andmed) |
getInstance |
Staatiline meetod DOM-i elemendiga seotud scrollspy eksemplari hankimiseks. |
getOrCreateInstance |
Staatiline meetod scrollspy eksemplari sidumiseks DOM-i elemendiga või uue loomiseks juhuks, kui seda ei lähtestatud. |
refresh |
DOM-i elementide lisamisel või eemaldamisel peate kutsuma värskendusmeetodi. |
Siin on näide värskendusmeetodi kasutamisest:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Sündmused
| Sündmus | Kirjeldus |
|---|---|
activate.bs.scrollspy |
See sündmus käivitub kerimiselemendil alati, kui scrollspy aktiveerib ankru. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})