Scrollspy
Uppdatera automatiskt Bootstrap-navigering eller listgruppskomponenter baserat på rullningsposition för att indikera vilken länk som för närvarande är aktiv i visningsporten.
Hur det fungerar
Scrollspy har några krav för att fungera korrekt:
- Den måste användas på en Bootstrap nav-komponent eller listgrupp .
- Scrollspy kräver
position: relative;på elementet du spionerar på, vanligtvis<body>. - Ankare (
<a>) krävs och måste peka på ett element med detid.
När den har implementerats framgångsrikt kommer din nav- eller listgrupp att uppdateras i enlighet med detta och flytta .activeklassen från ett objekt till nästa baserat på deras associerade mål.
Rullbara behållare och tangentbordsåtkomst
Om du gör en rullningsbar behållare (annan än <body>), se till att ha en heightuppsättning och overflow-y: scroll;applicerad på den – bredvid en tabindex="0"för att säkerställa tangentbordsåtkomst.
Exempel i navbar
Bläddra i området under navigeringsfältet och se hur den aktiva klassen ändras. Alternativen i rullgardinsmenyn kommer också att markeras.
Första rubriken
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Andra rubriken
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Tredje rubriken
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Fjärde rubriken
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Femte rubriken
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
<nav id="navbar-example2" class="navbar navbar-light bg-light px-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-offset="0" class="scrollspy-example" 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>
Exempel med kapslad nav
Scrollspy fungerar också med kapslade .navs. Om en kapslad .navär .activekommer dess föräldrar också att vara .active. Bläddra i området bredvid navigeringsfältet och se hur den aktiva klassen ändras.
Punkt 1
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Punkt 1-1
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Punkt 1-2
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Punkt 2
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Punkt 3
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Punkt 3-1
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Punkt 3-2
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Navbar</a>
<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 data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
Exempel med list-grupp
Scrollspy fungerar också med .list-groups. Bläddra i området bredvid listgruppen och se hur den aktiva klassen ändras.
Punkt 1
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Punkt 2
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Punkt 3
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
Punkt 4
Detta är en del platshållarinnehåll för scrollspy-sidan. Observera att när du rullar nedåt på sidan markeras lämplig navigeringslänk. Det upprepas genom hela komponentexemplet. Vi fortsätter att lägga till ytterligare några exemplar här för att betona rullningen och markeringen.
<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 data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" 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>
Användande
Via dataattribut
För att enkelt lägga till scrollspy-beteende till din toppfältsnavigering, lägg data-bs-spy="scroll"till elementet du vill spionera på (vanligtvis skulle detta vara <body>). Lägg sedan till data-bs-targetattributet med ID eller klass för det överordnade elementet för någon Bootstrap- .navkomponent.
body {
position: relative;
}
<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
Efter att ha lagt position: relative;till din CSS, ring scrollspy via JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Lösbara ID-mål krävs
Navbar-länkar måste ha lösbara id-mål. Till exempel måste ett <a href="#home">home</a>måste motsvara något i DOM som <div id="home"></div>.
Icke-synliga målelement ignoreras
Målelement som inte är synliga kommer att ignoreras och deras motsvarande navigeringsobjekt kommer aldrig att markeras.
Metoder
uppdatera
När du använder scrollspy i kombination med att lägga till eller ta bort element från DOM, måste du anropa uppdateringsmetoden så här:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
kassera
Förstör ett elements scrollspy. (Tar bort lagrad data på DOM-elementet)
getInstance
Statisk metod som låter dig få scrollspy-instansen associerad med ett DOM-element
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Statisk metod som låter dig få scrollspy-instansen kopplad till ett DOM-element, eller skapa en ny om den inte initierades
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
alternativ
Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-bs-, som i data-bs-offset="".
| namn | Typ | Standard | Beskrivning |
|---|---|---|---|
offset |
siffra | 10 |
Pixlar att förskjuta från toppen vid beräkning av rullningsposition. |
method |
sträng | auto |
Hittar vilken sektion det spionerade elementet är i. autokommer att välja den bästa metoden för att få rullningskoordinater. offsetkommer att använda Element.getBoundingClientRect()metoden för att få rullningskoordinater. positionkommer att använda egenskaperna HTMLElement.offsetTopoch HTMLElement.offsetLeftför att få rullningskoordinater. |
target |
sträng | jQuery-objekt | DOM-element | Anger element för att tillämpa Scrollspy-plugin. |
evenemang
| Event typ | Beskrivning |
|---|---|
activate.bs.scrollspy |
Den här händelsen utlöses på rullningselementet när ett nytt objekt aktiveras av scrollspionen. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})