Scrollspy
Värskendage automaatselt Bootstrapi navigeerimist või loendirühma komponente kerimisasendi alusel, et näidata, milline link on praegu vaateaknas aktiivne.
Kuidas see töötab
Scrollspy'l on nõuetekohaseks toimimiseks mõned nõuded:
- Seda tuleb kasutada Bootstrapi navigeerimiskomponendis või loendirühmas .
- Scrollspy nõuab
position: relative;
elementi, mille järgi luurate, tavaliselt<body>
. - Ankrud (
<a>
) on nõutavad ja peavad osutama sellega elemendileid
.
Kui see on edukalt rakendatud, värskendatakse teie navigeerimis- või loendirühma vastavalt, teisaldades .active
klassi ühelt üksuselt teisele vastavalt nendega seotud sihtmärkidele.
Keritavad konteinerid ja juurdepääs klaviatuurile
Kui loote keritava konteineri (v.a <body>
), veenduge, et teil oleks height
komplekt ja overflow-y: scroll;
see oleks rakendatud – lisaks klahvile, tabindex="0"
et tagada juurdepääs klaviatuurile.
Näide navigeerimisribal
Kerige navigeerimisriba all olevat ala ja vaadake aktiivse klassi muutumist. Samuti tõstetakse esile rippmenüü üksused.
Esimene pealkiri
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Teine pealkiri
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Kolmas pealkiri
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Neljas pealkiri
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Viies pealkiri
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
<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>
Näide pesastatud naviga
Scrollspy töötab ka pesastatud .nav
s-ga. Kui pesastatud .nav
on .active
, on ka selle vanemad .active
. Kerige navigeerimisriba kõrval olevat ala ja vaadake aktiivse klassi muutumist.
1. punkt
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 1-1
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 1-2
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
2. punkt
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 3
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 3-1
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 3-2
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
<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>
Näide loendirühmaga
Scrollspy töötab ka .list-group
s-iga. Kerige loendirühma kõrval olevat ala ja vaadake aktiivse klassi muutumist.
1. punkt
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
2. punkt
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 3
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
Punkt 4
See on scrollspy lehe kohatäite sisu. Pange tähele, et lehte alla kerides tõstetakse esile sobiv navigeerimislink. Seda korratakse kogu komponendi näites. Lisame siia veel mõne näidiseksemplari, et rõhutada kerimist ja esiletõstmist.
<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>
Kasutamine
Andmeatribuutide kaudu
Scrollspy käitumise hõlpsaks lisamiseks ülemise riba navigeerimisse lisage data-bs-spy="scroll"
element, mida soovite luurata (tavaliselt on see <body>
). Seejärel lisage atribuut mis tahes Bootstrapi komponendi data-bs-target
algelemendi ID või klassiga ..nav
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>
JavaScripti kaudu
Pärast position: relative;
CSS-i lisamist kutsuge JavaScripti kaudu scrollspy:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Vajalikud on lahendatavad ID sihtmärgid
Navigeerimisriba linkidel peavad olema lahendatavad ID sihtmärgid. Näiteks <a href="#home">home</a>
peab vastama millelegi DOM-is nagu <div id="home"></div>
.
Mittenähtavaid sihtelemente eirati
Sihtelemente, mis pole nähtavad, ignoreeritakse ja neile vastavaid navigeerimisüksusi ei tõsteta kunagi esile.
meetodid
värskenda
Kui kasutate scrollspy-d koos DOM-i elementide lisamise või eemaldamisega, peate välja kutsuma värskendusmeetodi järgmiselt:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
käsutada
Hävitab elemendi scrollspy. (Eemaldab DOM-elemendile salvestatud andmed)
getInstance
Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud scrollspy eksemplari
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud scrollspy eksemplari või luua uue juhuks, kui seda ei lähtestatud
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Valikud
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-bs-
, nagu data-bs-offset=""
.
Nimi | Tüüp | Vaikimisi | Kirjeldus |
---|---|---|---|
offset |
number | 10 |
Pikslid nihutamiseks ülevalt kerimise asukoha arvutamisel. |
method |
string | auto |
Otsib, millises jaotises luuratud element asub. auto valib kerimiskoordinaatide hankimiseks parima meetodi. offset kasutab seda Element.getBoundingClientRect() meetodit kerimiskoordinaatide hankimiseks. position kasutab kerimiskoordinaatide hankimiseks atribuute ja HTMLElement.offsetTop .HTMLElement.offsetLeft |
target |
string | jQuery objekt | DOM element | Määrab elemendi, mida Scrollspy pistikprogrammi rakendada. |
Sündmused
Sündmuse tüüp | Kirjeldus |
---|---|
activate.bs.scrollspy |
See sündmus käivitub kerimiselemendil alati, kui scrollspy aktiveerib uue üksuse. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})