Scrollspy
Oppdater Bootstrap-navigasjons- eller listegruppekomponenter automatisk basert på rulleposisjon for å indikere hvilken kobling som for øyeblikket er aktiv i visningsporten.
Hvordan det fungerer
Scrollspy bytter .activeklassen på ankerelementer ( <a>) når elementet med idankerets refererte hrefrulles til syne. Scrollspy brukes best sammen med en Bootstrap nav-komponent eller listegruppe , men den vil også fungere med alle ankerelementer på gjeldende side. Slik fungerer det.
-
For å starte krever scrollspy to ting: en navigasjon, listegruppe eller et enkelt sett med lenker, pluss en rullbar beholder. Den rullbare beholderen kan være
<body>eller et tilpasset element med et settheightogoverflow-y: scroll. -
På den rullbare beholderen legger du til
data-bs-spy="scroll"ogdata-bs-target="#navId"hvornavIder det unikeidfor den tilknyttede navigasjonen. Pass på å inkludere entabindex="0"for å sikre tastaturtilgang. -
Når du ruller den "spionerte" beholderen, blir en
.activeklasse lagt til og fjernet fra ankerlenker i den tilknyttede navigasjonen. Koblinger må ha løsbareidmål, ellers ignoreres de. For eksempel<a href="#home">home</a>må en tilsvare noe i DOM som<div id="home"></div> -
Målelementer som ikke er synlige vil bli ignorert. Se delen Ikke-synlige elementer nedenfor.
Eksempler
Navbar
Rull området under navigasjonslinjen og se den aktive klassen endre seg. Åpne rullegardinmenyen og se at rullegardinelementene også er uthevet.
Første overskrift
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Andre overskrift
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Tredje overskrift
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Fjerde overskrift
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Femte overskrift
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
<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>
Nestet nav
Scrollspy fungerer også med nestede .navs. Hvis en nestet .naver .active, vil foreldrene også være .active. Rull området ved siden av navigasjonslinjen og se den aktive klassen endre seg.
Vare 1
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Husk at JavaScript-pluginen prøver å velge riktig element blant alt som kan være synlig. Flere synlige scrollspy-mål samtidig kan forårsake noen problemer.
Punkt 1-1
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Husk at JavaScript-pluginen prøver å velge riktig element blant alt som kan være synlig. Flere synlige scrollspy-mål samtidig kan forårsake noen problemer.
Punkt 1-2
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Husk at JavaScript-pluginen prøver å velge riktig element blant alt som kan være synlig. Flere synlige scrollspy-mål samtidig kan forårsake noen problemer.
Punkt 2
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Husk at JavaScript-pluginen prøver å velge riktig element blant alt som kan være synlig. Flere synlige scrollspy-mål samtidig kan forårsake noen problemer.
Punkt 3
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Husk at JavaScript-pluginen prøver å velge riktig element blant alt som kan være synlig. Flere synlige scrollspy-mål samtidig kan forårsake noen problemer.
Punkt 3-1
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Husk at JavaScript-pluginen prøver å velge riktig element blant alt som kan være synlig. Flere synlige scrollspy-mål samtidig kan forårsake noen problemer.
Punkt 3-2
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Husk at JavaScript-pluginen prøver å velge riktig element blant alt som kan være synlig. Flere synlige scrollspy-mål samtidig kan forårsake noen problemer.
<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>
Listegruppe
Scrollspy fungerer også med .list-groups. Rull området ved siden av listegruppen og se den aktive klassen endre seg.
Vare 1
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Punkt 2
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Punkt 3
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Punkt 4
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
<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>
Enkle ankere
Scrollspy er ikke begrenset til nav-komponenter og listegrupper, så det vil fungere på alle <a>ankerelementer i gjeldende dokument. Bla gjennom området og se .activeklassen endre seg.
Vare 1
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Punkt 2
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Punkt 3
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Punkt 4
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
Punkt 5
Dette er noe plassholderinnhold for scrollspy-siden. Legg merke til at når du ruller nedover siden, blir den aktuelle navigasjonslenken uthevet. Det gjentas gjennom komponenteksemplet. Vi legger til flere eksemplarer her for å understreke rullingen og uthevingen.
<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>
Ikke-synlige elementer
Målelementer som ikke er synlige vil bli ignorert, og deres korresponderende nav-elementer vil ikke motta en .activeklasse. Scrollspy-forekomster initialisert i en ikke-synlig innpakning vil ignorere alle målelementer. Bruk refreshmetoden for å se etter observerbare elementer når omslaget blir synlig.
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()
})
})
Bruk
Via dataattributter
For enkelt å legge til scrollspy-adferd til topplinjenavigasjonen, legg data-bs-spy="scroll"til elementet du vil spionere på (vanligvis vil dette være <body>). Legg deretter til data-bs-targetattributtet med ideller klassenavnet til det overordnede elementet til en hvilken som helst Bootstrap- .navkomponent.
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Via JavaScript
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Alternativer
Siden alternativer kan sendes via dataattributter eller JavaScript, kan du legge til et alternativnavn til data-bs-, som i data-bs-animation="{value}". Sørg for å endre sakstypen for alternativnavnet fra " camelCase " til " kebab-case " når du sender alternativene via dataattributter. Bruk for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".
Fra Bootstrap 5.2.0 støtter alle komponenter et eksperimentelt reservert dataattributt data-bs-configsom kan inneholde enkel komponentkonfigurasjon som en JSON-streng. Når et element har data-bs-config='{"delay":0, "title":123}'og data-bs-title="456"attributter, vil den endelige titleverdien være 456og de separate dataattributtene vil overstyre verdier gitt på data-bs-config. I tillegg kan eksisterende dataattributter inneholde JSON-verdier som data-bs-delay='{"show":0,"hide":150}'.
| Navn | Type | Misligholde | Beskrivelse |
|---|---|---|---|
rootMargin |
streng | 0px 0px -25% |
Intersection Observer rootMargin gyldige enheter, ved beregning av rulleposisjon. |
smoothScroll |
boolsk | false |
Aktiverer jevn rulling når en bruker klikker på en lenke som refererer til ScrollSpy observerbare. |
target |
streng, DOM-element | null |
Spesifiserer element for å bruke Scrollspy-plugin. |
threshold |
array | [0.1, 0.5, 1] |
IntersectionObserver terskel gyldig inngang, ved beregning av rulleposisjon. |
Utdaterte alternativer
Fram til v5.1.3 brukte vi offset& methodoptions, som nå er avviklet og erstattet av rootMargin. For å beholde bakoverkompatibilitet, vil vi fortsette å analysere en gitt offsettil rootMargin, men denne funksjonen vil bli fjernet i v6 .
Metoder
| Metode | Beskrivelse |
|---|---|
dispose |
Ødelegger et elements rullespion. (Fjerner lagrede data på DOM-elementet) |
getInstance |
Statisk metode for å få scrollspy-forekomsten knyttet til et DOM-element. |
getOrCreateInstance |
Statisk metode for å få scrollspy-forekomsten knyttet til et DOM-element, eller for å opprette en ny i tilfelle den ikke ble initialisert. |
refresh |
Når du legger til eller fjerner elementer i DOM, må du kalle oppdateringsmetoden. |
Her er et eksempel som bruker oppdateringsmetoden:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
arrangementer
| Begivenhet | Beskrivelse |
|---|---|
activate.bs.scrollspy |
Denne hendelsen utløses på rulleelementet hver gang et anker aktiveres av scrollspionen. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})