Scrollspy
Opdater automatisk Bootstrap-navigation eller listegruppekomponenter baseret på rulleposition for at angive, hvilket link der i øjeblikket er aktivt i visningsporten.
Hvordan det virker
Scrollspy skifter .activeklassen til ankerelementer ( <a>), når elementet med det id, som ankeret refererer til href, rulles frem. Scrollspy bruges bedst sammen med en Bootstrap nav-komponent eller listegruppe , men det vil også fungere med alle ankerelementer på den aktuelle side. Sådan fungerer det.
-
For at starte kræver scrollspy to ting: en navigation, listegruppe eller et simpelt sæt links plus en rullebar container. Den rulbare beholder kan være
<body>eller et brugerdefineret element med et sætheightogoverflow-y: scroll. -
På den rulbare container skal du tilføje
data-bs-spy="scroll"ogdata-bs-target="#navId"hvornavIder det unikkeidfor den tilknyttede navigation. Sørg også for at inkludere ettabindex="0"for at sikre tastaturadgang. -
Når du ruller den "spionerede" container,
.activetilføjes en klasse og fjernes fra ankerlinks i den tilknyttede navigation. Links skal have opløseligeidmål, ellers ignoreres de. For eksempel, et<a href="#home">home</a>skal svare til noget i DOM som<div id="home"></div> -
Målelementer, der ikke er synlige, vil blive ignoreret. Se afsnittet Ikke-synlige elementer nedenfor.
Eksempler
Navbar
Rul gennem området under navigeringslinjen, og se den aktive klasse ændre sig. Åbn rullemenuen, og se rullemenupunkterne blive fremhævet også.
Første overskrift
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Anden overskrift
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Tredje overskrift
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Fjerde overskrift
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Femte overskrift
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
<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>
Indlejret nav
Scrollspy fungerer også med indlejrede .navs. Hvis en indlejret .naver .active, vil dens forældre også være .active. Rul gennem området ved siden af navigeringslinjen, og se den aktive klasse ændre sig.
Punkt 1
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Husk, at JavaScript-plugin'et forsøger at vælge det rigtige element blandt alt det, der kan være synligt. Flere synlige scrollspy-mål på samme tid kan forårsage nogle problemer.
Punkt 1-1
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Husk, at JavaScript-plugin'et forsøger at vælge det rigtige element blandt alt det, der kan være synligt. Flere synlige scrollspy-mål på samme tid kan forårsage nogle problemer.
Punkt 1-2
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Husk, at JavaScript-plugin'et forsøger at vælge det rigtige element blandt alt det, der kan være synligt. Flere synlige scrollspy-mål på samme tid kan forårsage nogle problemer.
Punkt 2
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Husk, at JavaScript-plugin'et forsøger at vælge det rigtige element blandt alt det, der kan være synligt. Flere synlige scrollspy-mål på samme tid kan forårsage nogle problemer.
Punkt 3
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Husk, at JavaScript-plugin'et forsøger at vælge det rigtige element blandt alt det, der kan være synligt. Flere synlige scrollspy-mål på samme tid kan forårsage nogle problemer.
Punkt 3-1
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Husk, at JavaScript-plugin'et forsøger at vælge det rigtige element blandt alt det, der kan være synligt. Flere synlige scrollspy-mål på samme tid kan forårsage nogle problemer.
Punkt 3-2
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Husk, at JavaScript-plugin'et forsøger at vælge det rigtige element blandt alt det, der kan være synligt. Flere synlige scrollspy-mål på samme tid kan forårsage nogle 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. Rul i området ved siden af listegruppen, og se den aktive klasse ændre sig.
Punkt 1
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Punkt 2
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Punkt 3
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Punkt 4
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
<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>
Simple ankre
Scrollspy er ikke begrænset til nav-komponenter og listegrupper, så det vil fungere på alle <a>ankerelementer i det aktuelle dokument. Rul gennem området og se .activeklassen skifte.
Punkt 1
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Punkt 2
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Punkt 3
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Punkt 4
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
Punkt 5
Dette er noget pladsholderindhold til scrollspy-siden. Bemærk, at når du ruller ned på siden, fremhæves det relevante navigationslink. Det gentages i hele komponenteksemplet. Vi bliver ved med at tilføje nogle flere eksempler her for at understrege rulning og fremhævning.
<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, der ikke er synlige, vil blive ignoreret, og deres tilsvarende nav-elementer modtager ikke en .activeklasse. Scrollspy-forekomster initialiseret i en ikke-synlig indpakning vil ignorere alle målelementer. Brug refreshmetoden til at kontrollere for observerbare elementer, når omslaget bliver synligt.
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()
})
})
Brug
Via dataattributter
For nemt at tilføje scrollspy-adfærd til din topbjælke-navigation, skal du tilføje data-bs-spy="scroll"til det element, du vil spionere på (det vil oftest være <body>). Tilføj derefter data-bs-targetattributten med ideller klassenavnet på det overordnede element i enhver 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'
})
Muligheder
Da muligheder kan videregives via dataattributter eller JavaScript, kan du tilføje et indstillingsnavn til data-bs-, som i data-bs-animation="{value}". Sørg for at ændre sagstypen for indstillingsnavnet fra " camelCase " til " kebab-case ", når du videregiver mulighederne via dataattributter. Brug for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".
Fra Bootstrap 5.2.0 understøtter alle komponenter en eksperimentel reserveret dataattribut data-bs-config, der kan rumme simpel komponentkonfiguration 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 titleværdi være, 456og de separate dataattributter vil tilsidesætte værdier givet på data-bs-config. Derudover er eksisterende dataattributter i stand til at rumme JSON-værdier som data-bs-delay='{"show":0,"hide":150}'.
| Navn | Type | Standard | Beskrivelse |
|---|---|---|---|
rootMargin |
snor | 0px 0px -25% |
Intersection Observer rootMargin gyldige enheder, ved beregning af rulleposition. |
smoothScroll |
boolesk | false |
Aktiverer jævn rulning, når en bruger klikker på et link, der refererer til ScrollSpy observerbare. |
target |
streng, DOM-element | null |
Angiver element, der skal anvende Scrollspy-plugin. |
threshold |
array | [0.1, 0.5, 1] |
IntersectionObserver tærskel gyldig input, ved beregning af rulleposition. |
Forældede indstillinger
Indtil v5.1.3 brugte vi offset& methodoptioner, som nu er forældet og erstattet af rootMargin. For at bevare bagudkompatibiliteten vil vi fortsætte med at parse en given offsettil rootMargin, men denne funktion vil blive fjernet i v6 .
Metoder
| Metode | Beskrivelse |
|---|---|
dispose |
Ødelægger et elements scrollspy. (Fjerner lagrede data på DOM-elementet) |
getInstance |
Statisk metode til at få scrollspy-forekomsten forbundet med et DOM-element. |
getOrCreateInstance |
Statisk metode til at få scrollspy-forekomsten tilknyttet et DOM-element, eller til at oprette en ny, hvis den ikke blev initialiseret. |
refresh |
Når du tilføjer eller fjerner elementer i DOM'en, skal du kalde opdateringsmetoden. |
Her er et eksempel, der bruger opdateringsmetoden:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Begivenheder
| Begivenhed | Beskrivelse |
|---|---|
activate.bs.scrollspy |
Denne hændelse udløses på rulleelementet, når et anker aktiveres af scrollspyen. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})