Scrollspy
Automatiškai atnaujinkite Bootstrap naršymą arba sąrašo grupės komponentus pagal slinkties padėtį, kad nurodytumėte, kuri nuoroda šiuo metu aktyvi peržiūros srityje.
Kaip tai veikia
Scrollspy turi keletą reikalavimų, kad tinkamai veiktų:
- Jis turi būti naudojamas Bootstrap navigacijos komponente arba sąrašo grupėje .
- Scrollspy reikalauja
position: relative;
elemento, kurį šnipinėjate, paprastai<body>
. - Inkarai (
<a>
) yra būtini ir turi nurodyti elementą su tuoid
.
Sėkmingai įdiegus, jūsų navigacija arba sąrašų grupė bus atitinkamai atnaujinta, perkeliant .active
klasę iš vieno elemento į kitą, atsižvelgiant į susijusius tikslus.
Slenkami konteineriai ir prieiga prie klaviatūros
Jei kuriate slenkamą sudėtinį rodinį (išskyrus <body>
), būtinai turėkite height
rinkinį ir overflow-y: scroll;
pritaikykite jį kartu su , tabindex="0"
kad užtikrintumėte prieigą prie klaviatūros.
Pavyzdys naršymo juostoje
Slinkite po naršymo juosta esančia sritimi ir stebėkite aktyvios klasės pasikeitimą. Išskleidžiamieji elementai taip pat bus paryškinti.
Pirma antraštė
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
Antroji antraštė
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
Trečia antraštė
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
Ketvirta antraštė
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
Penkta antraštė
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
<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>
Pavyzdys su įdėtomis navigacijomis
Scrollspy taip pat veikia su įdėtomis .nav
s. Jei įdėtas .nav
yra .active
, jo tėvai taip pat bus .active
. Slinkite šalia naršymo juostos esančia zona ir stebėkite, kaip keičiasi aktyvi klasė.
1 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
1-1 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
1-2 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
2 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
3 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
3-1 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
3-2 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
<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>
Pavyzdys su sąrašo grupe
Scrollspy taip pat veikia su .list-group
s. Slinkite šalia sąrašo grupės esančia sritimi ir stebėkite aktyvios klasės pasikeitimą.
1 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
2 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
3 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
4 punktas
Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.
<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>
Naudojimas
Per duomenų atributus
Norėdami lengvai pridėti slinkties elgseną prie viršutinės juostos naršymo, pridėkite data-bs-spy="scroll"
elementą, kurį norite šnipinėti (dažniausiai tai būtų <body>
). Tada pridėkite atributą su bet kurio Bootstrap komponento data-bs-target
pirminio elemento ID arba klase ..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>
Per JavaScript
Pridėję position: relative;
CSS, iškvieskite scrollspy naudodami „JavaScript“:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Reikalingi išsprendžiami ID tikslai
Naršymo juostos nuorodos turi turėti išsprendžiamus ID tikslus. Pavyzdžiui, <a href="#home">home</a>
turi atitikti kažką DOM, pvz ., <div id="home"></div>
.
Nepaisoma nematomų tikslinių elementų
Tiksliniai elementai, kurie nematomi, bus ignoruojami, o atitinkami navigacijos elementai niekada nebus paryškinti.
Metodai
atnaujinti
Kai naudojate scrollspy kartu su elementų pridėjimu arba pašalinimu iš DOM, turėsite iškviesti atnaujinimo metodą, pavyzdžiui:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
disponuoti
Sunaikina elemento slinktį. (Pašalina saugomus duomenis DOM elemente)
getInstance
Statinis metodas, leidžiantis gauti scrollspy egzempliorių, susietą su DOM elementu
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Statinis metodas, leidžiantis gauti scrollspy egzempliorių, susietą su DOM elementu, arba sukurti naują, jei jis nebuvo inicijuotas
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Galimybės
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-bs-
, kaip ir data-bs-offset=""
.
vardas | Tipas | Numatytas | apibūdinimas |
---|---|---|---|
offset |
numerį | 10 |
Pikseliai, skirti nuo viršaus, skaičiuojant slinkties padėtį. |
method |
styga | auto |
Suranda, kurioje skiltyje yra žvalgomasis elementas. Parinks auto geriausią metodą slinkties koordinatėms gauti. offset naudos Element.getBoundingClientRect() metodą slinkimo koordinatėms gauti. position naudos HTMLElement.offsetTop ir HTMLElement.offsetLeft savybes, kad gautų slinkties koordinates. |
target |
styga | jQuery objektas | DOM elementas | Nurodo elementą, kurį reikia taikyti „Scrollspy“ papildiniui. |
Renginiai
Renginio tipas | apibūdinimas |
---|---|
activate.bs.scrollspy |
Šis įvykis suaktyvinamas slinkties elemente, kai „scrollspy“ suaktyvina naują elementą. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})