Scrollspy
Samodejno posodobi navigacijo Bootstrap ali komponente skupine seznamov na podlagi položaja drsenja, da pokaže, katera povezava je trenutno aktivna v vidnem polju.
Kako deluje
Scrollspy preklopi .activerazred na <a>elementih sidra ( ), ko se element, na katerega se idsklicuje sidro, hrefpomakne v pogled. Scrollspy je najbolje uporabiti v povezavi z navigacijsko komponento Bootstrap ali skupino seznamov , vendar bo deloval tudi z vsemi sidrnimi elementi na trenutni strani. Evo, kako to deluje.
-
Scrollspy za začetek potrebuje dve stvari: navigacijo, skupino seznamov ali preprost nabor povezav in vsebnik, ki ga je mogoče premikati. Drsni vsebnik je lahko
<body>ali element po meri z nizomheightinoverflow-y: scroll. -
Na drsnem vsebniku dodajte
data-bs-spy="scroll"indata-bs-target="#navId"kjenavIdje unikatidpovezane navigacije. Ne pozabite vključiti tudi,tabindex="0"da zagotovite dostop do tipkovnice. -
Ko se premikate po »vohunjenem« vsebniku, se
.activerazred doda in odstrani iz sidrnih povezav znotraj povezane navigacije. Povezave morajo imeti razrešljiveidcilje, sicer so prezrte. Na primer,<a href="#home">home</a>mora ustrezati nečemu v DOM-u, kot je<div id="home"></div> -
Ciljni elementi, ki niso vidni, bodo prezrti. Glejte razdelek Nevidni elementi spodaj.
Primeri
Navbar
Pomaknite se po območju pod vrstico za krmarjenje in opazujte spremembo aktivnega razreda. Odprite spustni meni in opazujte, kako so označeni tudi spustni elementi.
Prvi naslov
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Drugi naslov
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Tretji naslov
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Četrti naslov
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Peti naslov
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
<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>
Ugnezdena nav
Scrollspy deluje tudi z ugnezdenimi .navs. Če je ugnezdeni .nav, .activebodo tudi njegovi starši .active. Pomaknite se po območju poleg vrstice za krmarjenje in opazujte spremembo aktivnega razreda.
Točka 1
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Ne pozabite, da vtičnik JavaScript poskuša izbrati pravi element med vsemi, ki so morda vidni. Več vidnih ciljev Scrollspy hkrati lahko povzroči nekatere težave.
Postavka 1-1
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Ne pozabite, da vtičnik JavaScript poskuša izbrati pravi element med vsemi, ki so morda vidni. Več vidnih ciljev Scrollspy hkrati lahko povzroči nekatere težave.
Točka 1-2
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Ne pozabite, da vtičnik JavaScript poskuša izbrati pravi element med vsemi, ki so morda vidni. Več vidnih ciljev Scrollspy hkrati lahko povzroči nekatere težave.
Točka 2
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Ne pozabite, da vtičnik JavaScript poskuša izbrati pravi element med vsemi, ki so morda vidni. Več vidnih ciljev Scrollspy hkrati lahko povzroči nekatere težave.
Točka 3
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Ne pozabite, da vtičnik JavaScript poskuša izbrati pravi element med vsemi, ki so morda vidni. Več vidnih ciljev Scrollspy hkrati lahko povzroči nekatere težave.
Točka 3-1
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Ne pozabite, da vtičnik JavaScript poskuša izbrati pravi element med vsemi, ki so morda vidni. Več vidnih ciljev Scrollspy hkrati lahko povzroči nekatere težave.
Točka 3-2
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Ne pozabite, da vtičnik JavaScript poskuša izbrati pravi element med vsemi, ki so morda vidni. Več vidnih ciljev Scrollspy hkrati lahko povzroči nekatere težave.
<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>
Seznam skupine
Scrollspy deluje tudi s .list-groups. Pomaknite se po območju poleg skupine seznama in opazujte spremembo aktivnega razreda.
Točka 1
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Točka 2
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Točka 3
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Točka 4
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
<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>
Preprosta sidra
Scrollspy ni omejen na navigacijske komponente in skupine seznamov, zato bo deloval na vseh <a>sidrnih elementih v trenutnem dokumentu. Pomikajte se po območju in opazujte .activemenjavo razreda.
Točka 1
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Točka 2
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Točka 3
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Točka 4
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
Točka 5
To je nekaj nadomestne vsebine za stran scrollspy. Upoštevajte, da je med pomikanjem po strani navzdol označena ustrezna navigacijska povezava. Ponavlja se v celotnem primeru komponente. Tukaj dodajamo še nekaj primerov, da poudarimo drsenje in označevanje.
<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>
Nevidni elementi
Ciljni elementi, ki niso vidni, bodo prezrti in njihovi ustrezni elementi navigacije ne bodo prejeli .activerazreda. Primerki Scrollspy, inicializirani v nevidnem ovoju, bodo prezrli vse ciljne elemente. Uporabite refreshmetodo za preverjanje elementov, ki jih je mogoče opazovati, ko postane ovoj viden.
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()
})
})
Uporaba
Preko podatkovnih atributov
Če želite enostavno dodati vohunsko vedenje v svojo zgornjo vrstico, dodajte data-bs-spy="scroll"element, za katerim želite vohuniti (najpogosteje je to <body>). Nato dodajte data-bs-targetatribut z idimenom razreda ali nadrejenega elementa katere koli .navkomponente Bootstrap.
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Prek JavaScripta
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Opcije
Ker je možnosti mogoče posredovati prek podatkovnih atributov ali JavaScripta, lahko dodate ime možnosti v data-bs-, kot v data-bs-animation="{value}". Prepričajte se, da ste spremenili vrsto malega črke imena možnosti iz " camelCase " v " kebab-case ", ko posredujete možnosti prek podatkovnih atributov. Na primer, uporabite data-bs-custom-class="beautifier"namesto data-bs-customClass="beautifier".
Od Bootstrap 5.2.0 naprej vse komponente podpirajo poskusni atribut rezerviranih podatkov, data-bs-configki lahko hrani preprosto konfiguracijo komponente kot niz JSON. Ko ima element atribute data-bs-config='{"delay":0, "title":123}'in data-bs-title="456", bo končna titlevrednost 456in ločeni atributi podatkov bodo preglasili vrednosti, podane na data-bs-config. Poleg tega lahko obstoječi atributi podatkov hranijo vrednosti JSON, kot je data-bs-delay='{"show":0,"hide":150}'.
| Ime | Vrsta | Privzeto | Opis |
|---|---|---|---|
rootMargin |
vrvica | 0px 0px -25% |
Intersection Observer rootMargin veljavne enote pri izračunu položaja drsenja. |
smoothScroll |
logično | false |
Omogoča gladko drsenje, ko uporabnik klikne povezavo, ki se nanaša na opazovane ScrollSpy. |
target |
niz, element DOM | null |
Določa element za uporabo vtičnika Scrollspy. |
threshold |
niz | [0.1, 0.5, 1] |
IntersectionObserver prag veljavnega vnosa pri izračunu položaja drsenja. |
Zastarele možnosti
Do v5.1.3 smo uporabljali offset& methodmožnosti, ki so zdaj zastarele in nadomeščene z rootMargin. Da bi ohranili združljivost za nazaj, bomo še naprej razčlenjevali podano offsetv rootMargin, vendar bo ta funkcija odstranjena v v6 .
Metode
| Metoda | Opis |
|---|---|
dispose |
Uniči scrollspy elementa. (Odstrani shranjene podatke v elementu DOM) |
getInstance |
Statična metoda za pridobitev primerka scrollspy, povezanega z elementom DOM. |
getOrCreateInstance |
Statična metoda za pridobitev primerka scrollspy, povezanega z elementom DOM, ali za ustvarjanje novega, če ni bil inicializiran. |
refresh |
Ko dodajate ali odstranjujete elemente v DOM, boste morali poklicati metodo osveževanja. |
Tukaj je primer uporabe metode osveževanja:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Dogodki
| Dogodek | Opis |
|---|---|
activate.bs.scrollspy |
Ta dogodek se sproži na drsnem elementu vsakič, ko scrollspy aktivira sidro. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})