Scrollspy
Uppfærðu sjálfkrafa Bootstrap siglingar eða lista hóphluta byggt á skrunstöðu til að gefa til kynna hvaða hlekkur er virkur í útsýnisglugganum.
Hvernig það virkar
Scrollspy hefur nokkrar kröfur til að virka rétt:
- Það verður að nota á Bootstrap nav íhlut eða listahóp .
- Scrollspy krefst
position: relative;
þess þáttar sem þú ert að njósna um, venjulega<body>
. - Akkeri (
<a>
) eru nauðsynleg og verða að benda á þátt með þvíid
.
Þegar innleiðing hefur tekist, mun siglinga- eða listahópurinn þinn uppfæra í samræmi við það og færa .active
bekkinn frá einu atriði til annars miðað við tengd markmið þeirra.
Skrunanlegir gámar og lyklaborðsaðgangur
Ef þú ert að búa til flettanlegt gám (annað en <body>
), vertu viss um að hafa height
sett og overflow-y: scroll;
sett á það - ásamt a tabindex="0"
til að tryggja aðgang að lyklaborði.
Dæmi í navbar
Skrunaðu svæðið fyrir neðan siglingastikuna og horfðu á virka bekkinn breytast. Fellilistaratriðin verða einnig auðkennd.
Fyrsta fyrirsögn
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Önnur fyrirsögn
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Þriðja fyrirsögn
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Fjórða fyrirsögn
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Fimmta fyrirsögn
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
<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>
Dæmi með hreiðrað nav
Scrollspy vinnur einnig með hreiður .nav
s. Ef hreiður .nav
er .active
, verða foreldrar þess einnig .active
. Skrunaðu yfir svæðið við hlið stýrisstikunnar og horfðu á virka bekkinn breytast.
Liður 1
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Liður 1-1
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Liður 1-2
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Liður 2
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Liður 3
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Liður 3-1
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Liður 3-2
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
<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>
Dæmi með lista-hóp
Scrollspy vinnur líka með .list-group
s. Skrunaðu svæðið við hlið listahópsins og horfðu á virka bekkinn breytast.
Liður 1
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Liður 2
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Liður 3
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
Liður 4
Þetta er staðgengilsefni fyrir scrollspy síðuna. Athugaðu að þegar þú flettir niður síðuna er viðeigandi siglingartengill auðkenndur. Það er endurtekið í gegnum íhlutunardæmið. Við höldum áfram að bæta við fleiri dæmum hér til að leggja áherslu á að fletta og auðkenna.
<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>
Notkun
Í gegnum gagnaeiginleika
Til að bæta scrollspy hegðun auðveldlega við toppstikuna þína skaltu bæta data-bs-spy="scroll"
við þættinum sem þú vilt njósna um (oftast væri þetta <body>
). Bættu síðan við data-bs-target
eigindinni með auðkenninu eða flokki móðurþáttar hvers Bootstrap .nav
íhluta.
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>
Með JavaScript
Eftir að þú hefur bætt position: relative;
við CSS skaltu hringja í scrollspy í gegnum JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Skiljanleg auðkennismarkmið krafist
Navbar tenglar verða að hafa leysanleg auðkennismarkmið. Til dæmis <a href="#home">home</a>
verður að samsvara einhverju í DOM eins og <div id="home"></div>
.
Ósýnileg markeiningar hunsuð
Markþættir sem eru ekki sýnilegir verða hunsaðir og samsvarandi nav atriði þeirra verða aldrei auðkennd.
Aðferðir
hressa
Þegar þú notar scrollspy í tengslum við að bæta við eða fjarlægja þætti úr DOM þarftu að kalla á endurnýjunaraðferðina svona:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
farga
Eyðir scrollspy frumefnis. (Fjarlægir vistuð gögn á DOM-einingunni)
getTilvik
Static aðferð sem gerir þér kleift að fá scrollspy tilvikið tengt DOM frumefni
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Static aðferð sem gerir þér kleift að fá scrollspy tilvikið tengt DOM frumefni, eða búa til nýjan ef það var ekki frumstillt
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Valmöguleikar
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-bs-
, eins og í data-bs-offset=""
.
Nafn | Tegund | Sjálfgefið | Lýsing |
---|---|---|---|
offset |
númer | 10 |
Dílar til að vega upp frá toppi þegar reiknað er út stöðu flettu. |
method |
strengur | auto |
Finnur í hvaða hluta njósnaða þátturinn er. auto mun velja bestu aðferðina til að fá skrunhnit. offset mun nota Element.getBoundingClientRect() aðferðina til að fá skrunhnit. position mun nota eiginleikana HTMLElement.offsetTop og HTMLElement.offsetLeft til að fá skrunhnit. |
target |
strengur | jQuery hlutur | DOM þáttur | Tilgreinir þátt til að nota Scrollspy viðbótina. |
Viðburðir
Tegund viðburðar | Lýsing |
---|---|
activate.bs.scrollspy |
Þessi atburður kviknar á skrunelementinu í hvert sinn sem nýr hlutur verður virkjaður af scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})