Scrollspy
Automātiski atjauniniet Bootstrap navigācijas vai saraksta grupas komponentus, pamatojoties uz ritināšanas pozīciju, lai norādītu, kura saite pašlaik ir aktīva skatvietā.
Kā tas strādā
Lai Scrollspy pareizi darbotos, ir jāievēro dažas prasības:
- Tas ir jāizmanto Bootstrap navigācijas komponentā vai sarakstu grupā .
- Scrollspy pieprasa
position: relative;elementu, kuru izspiegojat, parasti<body>. - Enkuri (
<a>) ir nepieciešami, un tiem jānorāda uz elementu ar toid.
Kad tas būs veiksmīgi ieviests, jūsu navigācijas vai sarakstu grupa tiks attiecīgi atjaunināta, pārvietojot .activeklasi no viena vienuma uz nākamo, pamatojoties uz saistītajiem mērķiem.
Ritināmi konteineri un piekļuve tastatūrai
Ja veidojat ritināmu konteineru (izņemot <body>), noteikti tam ir jābūt heightiestatītam un overflow-y: scroll;lietotam kopā ar tabindex="0", lai nodrošinātu piekļuvi tastatūrai.
Piemērs navigācijas joslā
Ritiniet apgabalu zem navigācijas joslas un skatieties, kā mainās aktīvā klase. Tiks izcelti arī nolaižamās izvēlnes vienumi.
Pirmais virsraksts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
Otrais virsraksts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
Trešā virsraksts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
Ceturtā virsraksts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
Piektā virsraksts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
<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>
Piemērs ar ligzdotu navigāciju
Scrollspy darbojas arī ar ligzdotiem .navs. Ja ligzdots .navir .active, tā vecāki arī būs .active. Ritiniet apgabalu blakus navigācijas joslai un skatieties, kā mainās aktīvā klase.
1. punkts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
1-1
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
1.-2. punkts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
2. punkts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
3. punkts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
3-1. punkts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
3-2. punkts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
<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>
Piemērs ar sarakstu grupu
Scrollspy darbojas arī ar .list-groups. Ritiniet apgabalu blakus saraksta grupai un skatieties aktīvās klases izmaiņas.
1. punkts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
2. punkts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
3. punkts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
4. punkts
Šis ir viettura saturs scrollspy lapai. Ņemiet vērā, ka, ritinot lapu uz leju, tiek iezīmēta atbilstošā navigācijas saite. Tas tiek atkārtots visā komponenta piemērā. Mēs turpinām šeit pievienot vēl dažus piemērus, lai uzsvērtu ritināšanu un izcelšanu.
<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>
Lietošana
Izmantojot datu atribūtus
Lai augšējās joslas navigācijai viegli pievienotu scrollspy darbību, pievienojiet data-bs-spy="scroll"elementu, kuru vēlaties izspiegot (parasti tas ir <body>). Pēc tam pievienojiet atribūtu ar jebkura Bootstrap komponenta data-bs-targetvecākelementa ID vai klasi ..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>
Izmantojot JavaScript
Pēc position: relative;CSS pievienošanas izsauciet scrollspy, izmantojot JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Nepieciešami atrisināmi ID mērķi
Navigācijas joslas saitēm ir jābūt atrisināmiem ID mērķiem. Piemēram, <a href="#home">home</a>ir jāatbilst kaut kam DOM, piemēram, <div id="home"></div>.
Neredzami mērķa elementi ir ignorēti
Mērķa elementi, kas nav redzami, tiks ignorēti, un tiem atbilstošie navigācijas vienumi nekad netiks izcelti.
Metodes
atjaunot
Izmantojot scrollspy kopā ar elementu pievienošanu vai noņemšanu no DOM, jums būs jāizsauc atsvaidzināšanas metode, piemēram:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
atbrīvoties
Iznīcina elementa scrollspy. (Noņem DOM elementā saglabātos datus)
getInstance
Statiskā metode, kas ļauj iegūt scrollspy gadījumu, kas saistīts ar DOM elementu
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Statiskā metode, kas ļauj iegūt scrollspy instanci, kas saistīta ar DOM elementu, vai izveidot jaunu, ja tas nav inicializēts
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Iespējas
Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-bs-, tāpat kā data-bs-offset="".
| Vārds | Tips | Noklusējums | Apraksts |
|---|---|---|---|
offset |
numuru | 10 |
Pikseļi, kas jānobīda no augšas, aprēķinot ritināšanas pozīciju. |
method |
stīga | auto |
Atrod, kurā sadaļā atrodas izspiegotais elements. autoTas izvēlēsies labāko metodi ritināšanas koordinātu iegūšanai. offsetizmantos Element.getBoundingClientRect()metodi, lai iegūtu ritināšanas koordinātas. positionizmantos HTMLElement.offsetTopun HTMLElement.offsetLeftrekvizītus, lai iegūtu ritināšanas koordinātas. |
target |
stīga | jQuery objekts | DOM elements | Norāda elementu, kam lietot spraudni Scrollspy. |
Pasākumi
| Pasākuma veids | Apraksts |
|---|---|
activate.bs.scrollspy |
Šis notikums tiek aktivizēts ritināšanas elementā ikreiz, kad scrollspy aktivizē jaunu vienumu. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})