Scrollspy
Dateer Bootstrap-navigasie of lys groepkomponente outomaties op gebaseer op rolposisie om aan te dui watter skakel tans aktief is in die viewport.
Hoe dit werk
Scrollspy het 'n paar vereistes om behoorlik te funksioneer:
- Dit moet op 'n Bootstrap nav-komponent of lysgroep gebruik word .
- Scrollspy vereis
position: relative;
op die element waarop jy spioeneer, gewoonlik die<body>
. - Ankers (
<a>
) word vereis en moet na 'n element daarmee wysid
.
Wanneer dit suksesvol geïmplementeer is, sal jou navigasie- of lysgroep dienooreenkomstig opdateer en die .active
klas van een item na die volgende skuif op grond van hul verwante teikens.
Rolbare houers en sleutelbordtoegang
As jy 'n blaaibare houer maak (behalwe die <body>
), maak seker dat jy 'n height
stel het en daarop overflow-y: scroll;
toegepas word—langs 'n tabindex="0"
om sleutelbordtoegang te verseker.
Voorbeeld in navbar
Blaai deur die area onder die navigasiebalk en kyk hoe die aktiewe klas verander. Die aftrek-items sal ook uitgelig word.
Eerste opskrif
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Tweede opskrif
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Derde opskrif
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Vierde opskrif
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Vyfde opskrif
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
<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>
Voorbeeld met geneste nav
Scrollspy werk ook met geneste .nav
s. As 'n geneste .nav
is .active
, sal sy ouers ook wees .active
. Blaai deur die area langs die navigasiebalk en kyk hoe die aktiewe klas verander.
Item 1
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Item 1-1
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Item 1-2
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Item 2
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Item 3
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Item 3-1
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Item 3-2
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
<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>
Voorbeeld met lys-groep
Scrollspy werk ook met .list-group
s. Blaai deur die area langs die lysgroep en kyk hoe die aktiewe klas verander.
Item 1
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Item 2
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Item 3
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
Item 4
Dit is 'n paar plekhouer-inhoud vir die scrollspy-bladsy. Let daarop dat die toepaslike navigasieskakel uitgelig word terwyl jy op die bladsy blaai. Dit word deur die komponentvoorbeeld herhaal. Ons hou aan om nog 'n voorbeeldkopie hier by te voeg om die blaai en uitlig te beklemtoon.
<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>
Gebruik
Via data-eienskappe
Om maklik scrollspy-gedrag by jou bobalknavigasie te voeg, voeg data-bs-spy="scroll"
by die element waarop jy wil spioeneer (meestal sal dit die <body>
). Voeg dan die data-bs-target
kenmerk by met die ID of klas van die ouerelement van enige Bootstrap- .nav
komponent.
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
Nadat u position: relative;
u CSS bygevoeg het, skakel die scrollspy via JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Oplosbare ID-teikens word vereis
Navbar-skakels moet oplosbare ID-teikens hê. Byvoorbeeld, 'n <a href="#home">home</a>
moet ooreenstem met iets in die DOM soos <div id="home"></div>
.
Nie-sigbare teikenelemente geïgnoreer
Teikenelemente wat nie sigbaar is nie, sal geïgnoreer word en hul ooreenstemmende navigasie-items sal nooit uitgelig word nie.
Metodes
verfris
Wanneer jy scrollspy gebruik in samewerking met die byvoeging of verwydering van elemente uit die DOM, moet jy die herlaaimetode soos volg noem:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
wegdoen
Vernietig 'n element se scrollspy. (Verwyder gestoorde data op die DOM-element)
getInstance
Statiese metode waarmee u die scrollspy-instansie kan kry wat met 'n DOM-element geassosieer word
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Statiese metode wat jou toelaat om die scrollspy-instansie te kry wat met 'n DOM-element geassosieer word, of 'n nuwe een te skep ingeval dit nie geïnisialiseer is nie
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-bs-
, soos in data-bs-offset=""
.
Naam | Tik | Verstek | Beskrywing |
---|---|---|---|
offset |
nommer | 10 |
Pixels om van bo af te verreken wanneer die posisie van rolberekening bereken word. |
method |
string | auto |
Vind in watter afdeling die gespioeneerde element is. auto sal die beste metode kies om rolkoördinate te kry. offset sal die Element.getBoundingClientRect() metode gebruik om rolkoördinate te kry. position sal die HTMLElement.offsetTop en HTMLElement.offsetLeft eienskappe gebruik om rolkoördinate te kry. |
target |
tou | jQuery voorwerp | DOM element | Spesifiseer element om Scrollspy-inprop toe te pas. |
Gebeurtenisse
Soort gebeurtenis | Beskrywing |
---|---|
activate.bs.scrollspy |
Hierdie gebeurtenis brand op die rolelement wanneer 'n nuwe item deur die rolspioen geaktiveer word. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})