Scrollspy
Automatski ažurirajte Bootstrap navigaciju ili komponente liste grupe na osnovu položaja pomeranja da biste naznačili koja je veza trenutno aktivna u okviru za prikaz.
Kako radi
Scrollspy prebacuje .activeklasu na sidrenim ( <a>) elementima kada se element sa idreferencama sidra hrefskroluje u prikaz. Scrollspy se najbolje koristi u kombinaciji s Bootstrap navigacijskom komponentom ili grupom liste , ali će također raditi sa svim elementima sidra na trenutnoj stranici. Evo kako to funkcionira.
-
Za početak, scrollspy zahtijeva dvije stvari: navigaciju, grupu lista ili jednostavan skup veza, plus kontejner koji se može pomicati. Kontejner koji se može pomicati može biti
<body>ili prilagođeni element sa skupomheightioverflow-y: scroll. -
U kontejneru koji se može pomicati, dodajte
data-bs-spy="scroll"idata-bs-target="#navId"gdjenavIdje jedinstvenoidza pridruženu navigaciju. Obavezno uključite i atabindex="0"kako biste osigurali pristup tastaturi. -
Dok skrolujete "špijunirani" kontejner,
.activeklasa se dodaje i uklanja iz sidrenih veza unutar povezane navigacije. Linkovi moraju imati razrješiveidciljeve, inače se ignoriraju. Na primjer,<a href="#home">home</a>mora odgovarati nečemu u DOM-u kao što je<div id="home"></div> -
Ciljni elementi koji nisu vidljivi će biti zanemareni. Pogledajte odjeljak Nevidljivi elementi ispod.
Primjeri
Navbar
Skrolujte područje ispod navigacijske trake i gledajte kako se aktivni razred mijenja. Otvorite padajući meni i gledajte kako su i padajuće stavke označene.
Prvi naslov
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Drugi naslov
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Treći naslov
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Četvrti naslov
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Peti naslov
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka 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>
Nested nav
Scrollspy također radi sa ugniježđenim .navs. .navAko je ugniježđeni .active, njegovi roditelji će također biti .active. Skrolujte područje pored navigacijske trake i gledajte kako se aktivni razred mijenja.
Stavka 1
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Imajte na umu da JavaScript dodatak pokušava odabrati pravi element između svega što može biti vidljivo. Više vidljivih scrollspy ciljeva u isto vrijeme može uzrokovati neke probleme.
Stavka 1-1
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Imajte na umu da JavaScript dodatak pokušava odabrati pravi element između svega što može biti vidljivo. Više vidljivih scrollspy ciljeva u isto vrijeme može uzrokovati neke probleme.
Stavka 1-2
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Imajte na umu da JavaScript dodatak pokušava odabrati pravi element između svega što može biti vidljivo. Više vidljivih scrollspy ciljeva u isto vrijeme može uzrokovati neke probleme.
Stavka 2
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Imajte na umu da JavaScript dodatak pokušava odabrati pravi element između svega što može biti vidljivo. Više vidljivih scrollspy ciljeva u isto vrijeme može uzrokovati neke probleme.
Stavka 3
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Imajte na umu da JavaScript dodatak pokušava odabrati pravi element između svega što može biti vidljivo. Više vidljivih scrollspy ciljeva u isto vrijeme može uzrokovati neke probleme.
Stavka 3-1
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Imajte na umu da JavaScript dodatak pokušava odabrati pravi element između svega što može biti vidljivo. Više vidljivih scrollspy ciljeva u isto vrijeme može uzrokovati neke probleme.
Tačka 3-2
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Imajte na umu da JavaScript dodatak pokušava odabrati pravi element između svega što može biti vidljivo. Više vidljivih scrollspy ciljeva u isto vrijeme može 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 liste
Scrollspy takođe radi sa .list-groups. Pomičite se po području pored grupe liste i gledajte kako se aktivna klasa mijenja.
Stavka 1
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 2
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 3
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 4
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka 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 komponente za navigaciju i grupe lista, tako da će raditi na svim <a>elementima sidra u trenutnom dokumentu. Pomičite se po području i gledajte kako se .activerazred mijenja.
Stavka 1
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 2
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 3
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 4
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka kako bismo naglasili pomicanje i isticanje.
Stavka 5
Ovo je neki sadržaj za čuvanje mjesta za scrollspy stranicu. Imajte na umu da dok skrolujete prema dolje po stranici, odgovarajuća navigacijska veza je istaknuta. Ponavlja se u cijelom primjeru komponente. Ovdje nastavljamo dodavati još primjeraka 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
Ciljni elementi koji nisu vidljivi će biti zanemareni i njihove odgovarajuće navigacijske stavke neće dobiti .activeklasu. Scrollspy instance inicijalizirane u nevidljivom omotu će zanemariti sve ciljne elemente. Koristite refreshmetodu da provjerite vidljive elemente kada omotač 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()
})
})
Upotreba
Preko atributa podataka
Da biste lako dodali ponašanje skrolovanja vašoj navigaciji na gornjoj traci, dodajte data-bs-spy="scroll"elementu koji želite da špijunirate (najčešće bi to bio <body>). Zatim dodajte data-bs-targetatribut sa idili imenom klase roditeljskog elementa bilo koje .navkomponente Bootstrapa.
<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'
})
Opcije
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 tip slučaja naziva opcije iz “ camelCase ” u “ kebab-case ” prilikom prosljeđivanja opcija 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 smjestiti jednostavnu konfiguraciju komponente kao JSON string. 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 će nadjačati vrijednosti date 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 | Default | Opis |
|---|---|---|---|
rootMargin |
string | 0px 0px -25% |
Intersection Observer rootMargin važeće jedinice, kada se izračunava pozicija pomicanja. |
smoothScroll |
boolean | false |
Omogućava glatko pomeranje kada korisnik klikne na vezu koja se odnosi na ScrollSpy vidljive elemente. |
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, kada se izračunava pozicija skrolovanja. |
Zastarjele opcije
Sve do v5.1.3 koristili smo offset& methodopcije, koje su sada zastarjele i zamijenjene sa rootMargin. Kako bismo zadržali kompatibilnost unatrag, nastavit ćemo raščlanjivati dato offsetu rootMargin, ali ova funkcija će biti uklonjena u v6 .
Metode
| Metoda | Opis |
|---|---|
dispose |
Uništava špijun za pomicanje elementa. (Uklanja pohranjene podatke na DOM elementu) |
getInstance |
Statička metoda za dobivanje scrollspy instance povezane s DOM elementom. |
getOrCreateInstance |
Statička metoda za dobivanje scrollspy instance povezane s DOM elementom ili za kreiranje novog u slučaju da nije inicijaliziran. |
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 događaj se pokreće na elementu za pomicanje svaki put kada je sidro aktivirano od strane scrollspy-a. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})