Scrollspy
Aŭtomate ĝisdatigu Bootstrap-navigadon aŭ listigu grupkomponentojn surbaze de rulpozicio por indiki kiu ligilo estas nuntempe aktiva en la vidfenestro.
Kiel ĝi funkcias
Scrollspy ŝanĝas la .activeklason sur ankro ( <a>) elementoj kiam la elemento kun la idreferencita de la ankro hrefestas rulumita en vido. Scrollspy estas plej bone uzata kune kun Bootstrap nav-komponento aŭ listgrupo , sed ĝi ankaŭ funkcios kun iuj ankraj elementoj en la nuna paĝo. Jen kiel ĝi funkcias.
-
Por komenci, scrollspy postulas du aferojn: navigado, listgrupo aŭ simpla aro de ligiloj, plus rulebla ujo. La rulebla ujo povas esti la
<body>aŭ kutima elemento kun aroheightkajoverflow-y: scroll. -
Sur la rulebla ujo, aldonu
data-bs-spy="scroll"kajdata-bs-target="#navId"kienavIdestas la unikaidde la rilata navigado. Nepre enmetu ankaŭtabindex="0"por certigi klavaran aliron. -
Dum vi rulumas la "spionitan" ujon,
.activeklaso estas aldonita kaj forigita de ankraj ligiloj ene de la rilata navigado. Ligiloj devas havi solveblajnidcelojn, alie ili estas ignoritaj. Ekzemple,<a href="#home">home</a>devas respondi al io en la DOM kiel<div id="home"></div> -
Celelementoj ne videblaj estos ignoritaj. Vidu la sekcion de Nevideblaj elementoj sube.
Ekzemploj
Navbaro
Rulumu la areon sub la navbar kaj rigardu la aktivan klasŝanĝon. Malfermu la falmenuon kaj rigardu la falmenuojn ankaŭ elstarigitaj.
Unua titolo
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Dua rubriko
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Tria rubriko
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Kvara titolo
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Kvina titolo
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
<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>
Nestita navigacio
Scrollspy ankaŭ funkcias kun nestitaj .navs. Se nesto .navestas .active, ĝiaj gepatroj ankaŭ estos .active. Rulumu la areon apud la navbar kaj rigardu la aktivan klasŝanĝon.
Item 1
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Memoru, ke la JavaScript-kromaĵo provas elekti la ĝustan elementon inter ĉio, kio povas esti videbla. Multoblaj videblaj scrollspy-celoj samtempe povas kaŭzi iujn problemojn.
Item 1-1
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Memoru, ke la JavaScript-kromaĵo provas elekti la ĝustan elementon inter ĉio, kio povas esti videbla. Multoblaj videblaj scrollspy-celoj samtempe povas kaŭzi iujn problemojn.
Item 1-2
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Memoru, ke la JavaScript-kromaĵo provas elekti la ĝustan elementon inter ĉio, kio povas esti videbla. Multoblaj videblaj scrollspy-celoj samtempe povas kaŭzi iujn problemojn.
Item 2
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Memoru, ke la JavaScript-kromaĵo provas elekti la ĝustan elementon inter ĉio, kio povas esti videbla. Multoblaj videblaj scrollspy-celoj samtempe povas kaŭzi iujn problemojn.
Item 3
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Memoru, ke la JavaScript-kromaĵo provas elekti la ĝustan elementon inter ĉio, kio povas esti videbla. Multoblaj videblaj scrollspy-celoj samtempe povas kaŭzi iujn problemojn.
Item 3-1
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Memoru, ke la JavaScript-kromaĵo provas elekti la ĝustan elementon inter ĉio, kio povas esti videbla. Multoblaj videblaj scrollspy-celoj samtempe povas kaŭzi iujn problemojn.
Item 3-2
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Memoru, ke la JavaScript-kromaĵo provas elekti la ĝustan elementon inter ĉio, kio povas esti videbla. Multoblaj videblaj scrollspy-celoj samtempe povas kaŭzi iujn problemojn.
<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>
Listo grupo
Scrollspy ankaŭ funkcias kun .list-groups. Rulumu la areon apud la listogrupo kaj rigardu la aktivan klasŝanĝon.
Item 1
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 2
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 3
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 4
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
<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>
Simplaj ankroj
Scrollspy ne estas limigita al nav-komponentoj kaj listgrupoj, do ĝi funkcios pri iuj <a>ankroelementoj en la nuna dokumento. Rulumu la areon kaj rigardu la .activeklasŝanĝon.
Item 1
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 2
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 3
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 4
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 5
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
<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>
Nevideblaj elementoj
Celelementoj kiuj ne estas videblaj estos ignoritaj kaj iliaj respondaj nav-eroj ne ricevos .activeklason. Scrollspy okazoj pravigitaj en nevidebla envolvaĵo ignoros ĉiujn celelementojn. Uzu la refreshmetodon por kontroli observeblajn elementojn post kiam la envolvaĵo fariĝas videbla.
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()
})
})
Uzado
Per datumaj atributoj
Por facile aldoni scrollspy-konduton al via supra navigado, aldonu data-bs-spy="scroll"al la elemento, kiun vi volas spioni (plej kutime ĉi tio estus la <body>). Poste aldonu la data-bs-targetatributon kun la idaŭ klasnomo de la gepatra elemento de iu ajn Bootstrap - .navkomponento.
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Per JavaScript
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Opcioj
Ĉar opcioj povas esti pasigitaj per datumaj atributoj aŭ JavaScript, vi povas almeti opcionomon al data-bs-, kiel en data-bs-animation="{value}". Nepre ŝanĝu la kazon de la opcionomo de " camelCase " al " kebab-case " kiam vi pasas la opciojn per datumaj atributoj. Ekzemple, uzu data-bs-custom-class="beautifier"anstataŭ data-bs-customClass="beautifier".
Ekde Bootstrap 5.2.0, ĉiuj komponantoj subtenas eksperimentan rezervitan datuman atributon data-bs-config, kiu povas enhavi simplan komponan agordon kiel JSON-ĉeno. Kiam elemento havas data-bs-config='{"delay":0, "title":123}'kaj data-bs-title="456"atributojn, la fina titlevaloro estos 456kaj la apartaj datumaj atributoj anstataŭigos valorojn donitajn sur data-bs-config. Krome, ekzistantaj datumaj atributoj povas enhavi JSON-valorojn kiel data-bs-delay='{"show":0,"hide":150}'.
| Nomo | Tajpu | Defaŭlte | Priskribo |
|---|---|---|---|
rootMargin |
ŝnuro | 0px 0px -25% |
Intersection Observer rootMargin validaj unuoj, kiam kalkulas rulpozicion. |
smoothScroll |
bulea | false |
Ebligas glatan movadon kiam uzanto klakas sur ligilo kiu rilatas al ScrollSpy-observeblaj. |
target |
ĉeno, DOM-elemento | null |
Specifas elementon por apliki Scrollspy kromaĵon. |
threshold |
tabelo | [0.1, 0.5, 1] |
IntersectionObserver sojlo valida enigo, kiam kalkulas rulpozicion. |
Malrekomenditaj Opcioj
Ĝis v5.1.3 ni uzis offset& methodopciojn, kiuj nun estas malrekomenditaj kaj anstataŭigitaj per rootMargin. Por konservi malantaŭan kongruon, ni daŭre analizos donitan offsetal rootMargin, sed ĉi tiu funkcio estos forigita en v6 .
Metodoj
| Metodo | Priskribo |
|---|---|
dispose |
Detruas la scrollspy de elemento. (Forigas konservitajn datumojn sur la DOM-elemento) |
getInstance |
Statika metodo por akiri la scrollspy-instancon asociitan kun DOM-elemento. |
getOrCreateInstance |
Senmova metodo por akiri la scrollspy-instancon asociitan kun DOM-elemento, aŭ por krei novan se ĝi ne estis pravigita. |
refresh |
Aldonante aŭ forigante elementojn en la DOM, vi devos voki la refreŝigan metodon. |
Jen ekzemplo uzante la refreŝigan metodon:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Eventoj
| Evento | Priskribo |
|---|---|
activate.bs.scrollspy |
Ĉi tiu evento pafas sur la rulelemento kiam ajn ankro estas aktivigita de la scrollspy. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})