Scrollspy
Automatski ažurirajte Bootstrap navigaciju ili komponente grupe popisa na temelju položaja pomicanja kako biste označili koja je veza trenutno aktivna u okviru za prikaz.
Kako radi
Scrollspy uključuje/isključuje .activeklasu na <a>elementima sidra ( ) kada se element na koji idupućuje sidro hrefpomakne u prikaz. Scrollspy je najbolje koristiti u kombinaciji s Bootstrapovom navigacijskom komponentom ili grupom popisa , ali također će raditi s bilo kojim elementima sidra na trenutnoj stranici. Evo kako to radi.
-
Za početak, scrollspy zahtijeva dvije stvari: navigaciju, grupu popisa ili jednostavan skup poveznica, plus spremnik koji se može pomicati. Spremnik koji se može pomicati može biti
<body>ili prilagođeni element sa skupomheightioverflow-y: scroll. -
Na spremniku koji se može pomicati dodajte
data-bs-spy="scroll"idata-bs-target="#navId"gdjenavIdje jedinstvenaidpridružena navigacija. Obavezno uključite itabindex="0"kako biste osigurali pristup tipkovnici. -
Dok se pomičete po "špijuniranom" spremniku,
.activeklasa se dodaje i uklanja iz veza sidra unutar pridružene navigacije. Veze moraju imati razrješiveidciljeve, inače se zanemaruju. Na primjer,<a href="#home">home</a>mora odgovarati nečemu u DOM-u poput<div id="home"></div> -
Elementi cilja koji nisu vidljivi bit će zanemareni. Pogledajte odjeljak Nevidljivi elementi u nastavku.
Primjeri
Navigacijska traka
Pomičite područje ispod navigacijske trake i promatrajte promjenu aktivne klase. Otvorite padajući izbornik i gledajte kako su i padajuće stavke označene.
Prvi naslov
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Drugi naslov
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Treći naslov
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Četvrti naslov
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Peti naslov
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
<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>
Ugniježđena nav
Scrollspy također radi s ugniježđenim .navs. .navAko je ugniježđeni .active, njegovi roditelji također će biti .active. Pomičite područje pored navigacijske trake i promatrajte promjenu aktivne klase.
Stavka 1
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Imajte na umu da dodatak za JavaScript pokušava odabrati pravi element među svime što može biti vidljivo. Višestruki vidljivi ScrollSpy ciljevi u isto vrijeme mogu uzrokovati neke probleme.
Točka 1-1
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Imajte na umu da dodatak za JavaScript pokušava odabrati pravi element među svime što može biti vidljivo. Višestruki vidljivi ScrollSpy ciljevi u isto vrijeme mogu uzrokovati neke probleme.
Točka 1-2
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Imajte na umu da dodatak za JavaScript pokušava odabrati pravi element među svime što može biti vidljivo. Višestruki vidljivi ScrollSpy ciljevi u isto vrijeme mogu uzrokovati neke probleme.
Stavka 2
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Imajte na umu da dodatak za JavaScript pokušava odabrati pravi element među svime što može biti vidljivo. Višestruki vidljivi ScrollSpy ciljevi u isto vrijeme mogu uzrokovati neke probleme.
Stavka 3
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Imajte na umu da dodatak za JavaScript pokušava odabrati pravi element među svime što može biti vidljivo. Višestruki vidljivi ScrollSpy ciljevi u isto vrijeme mogu uzrokovati neke probleme.
Točka 3-1
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Imajte na umu da dodatak za JavaScript pokušava odabrati pravi element među svime što može biti vidljivo. Višestruki vidljivi ScrollSpy ciljevi u isto vrijeme mogu uzrokovati neke probleme.
Točka 3-2
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Imajte na umu da dodatak za JavaScript pokušava odabrati pravi element među svime što može biti vidljivo. Višestruki vidljivi ScrollSpy ciljevi u isto vrijeme mogu uzrokovati neke probleme.
<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>
Grupa popisa
Scrollspy također radi sa .list-groups. Pomaknite se područjem pored grupe popisa i promatrajte promjenu aktivne klase.
Stavka 1
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 2
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 3
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 4
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
<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>
Jednostavna sidra
Scrollspy nije ograničen na navigacijske komponente i grupe popisa, tako da će raditi na svim <a>elementima sidra u trenutnom dokumentu. Pomičite se područjem i gledajte kako se .activeklasa mijenja.
Stavka 1
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 2
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 3
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 4
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
Stavka 5
Ovo je neki sadržaj rezerviranog mjesta za stranicu scrollspy. Imajte na umu da dok se pomičete prema dolje po stranici, odgovarajuća poveznica za navigaciju je istaknuta. Ponavlja se kroz cijeli primjer komponente. Ovdje nastavljamo dodavati još neke kopije primjera kako bismo naglasili pomicanje i isticanje.
<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>
Nevidljivi elementi
Elementi cilja koji nisu vidljivi bit će zanemareni i njihove odgovarajuće navigacijske stavke neće dobiti .activeklasu. Scrollspy instance inicijalizirane u nevidljivom omotu zanemarit će sve ciljne elemente. Koristite refreshmetodu za provjeru vidljivih elemenata nakon što omot postane vidljiv.
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()
})
})
Korištenje
Preko atributa podataka
Da biste jednostavno dodali scrollspy ponašanje svojoj navigaciji gornje trake, dodajte data-bs-spy="scroll"elementu koji želite špijunirati (najčešće bi to bio <body>). Zatim dodajte data-bs-targetatribut s nazivom idklase ili nadređenog elementa bilo koje Bootstrap .navkomponente.
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Preko JavaScripta
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Mogućnosti
Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite vrstu velikih i malih slova naziva opcije iz “ camelCase ” u “ kebab-case ” kada prosljeđujete opcije putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjesto data-bs-customClass="beautifier".
Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može sadržavati jednostavnu konfiguraciju komponente kao JSON niz. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka nadjačat će vrijednosti dane na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.
| Ime | Tip | Zadano | Opis |
|---|---|---|---|
rootMargin |
niz | 0px 0px -25% |
Intersection Observer rootMargin valjane jedinice, pri izračunavanju položaja pomicanja. |
smoothScroll |
Booleov | false |
Omogućuje glatko pomicanje kada korisnik klikne na vezu koja se odnosi na ScrollSpy observables. |
target |
string, DOM element | null |
Određuje element za primjenu Scrollspy dodatka. |
threshold |
niz | [0.1, 0.5, 1] |
IntersectionObserver prag važećeg unosa pri izračunavanju položaja pomicanja. |
Zastarjele opcije
Sve do v5.1.3 koristili smo offset& methodopcije, koje su sada zastarjele i zamijenjene s rootMargin. Kako bismo zadržali kompatibilnost s prethodnim verzijama, nastavit ćemo raščlanjivati dano offsetna rootMargin, ali će ova značajka biti uklonjena u verziji 6 .
Metode
| metoda | Opis |
|---|---|
dispose |
Uništava scrollspy elementa. (Uklanja pohranjene podatke na DOM elementu) |
getInstance |
Statička metoda za dobivanje instance scrollspy povezane s DOM elementom. |
getOrCreateInstance |
Statička metoda za dobivanje instance scrollspy povezane s DOM elementom ili za stvaranje nove u slučaju da nije inicijalizirana. |
refresh |
Kada dodajete ili uklanjate elemente u DOM-u, morat ćete pozvati metodu osvježavanja. |
Evo primjera korištenja metode osvježavanja:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Događaji
| Događaj | Opis |
|---|---|
activate.bs.scrollspy |
Ovaj se događaj pokreće na elementu pomicanja kad god se sidro aktivira scrollspy. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})