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ā
Scrollspy pārslēdz .activeklasi uz enkura ( <a>) elementiem, kad elements ar idenkura atsauci hreftiek ritināts skatā. Scrollspy vislabāk ir izmantot kopā ar Bootstrap navigācijas komponentu vai sarakstu grupu , taču tas darbosies arī ar visiem pašreizējās lapas enkura elementiem. Lūk, kā tas darbojas.
-
Lai sāktu, scrollspy nepieciešamas divas lietas: navigācija, sarakstu grupa vai vienkārša saišu kopa, kā arī ritināms konteiners. Ritināmais konteiners var būt
<body>vai pielāgots elements ar kopuheightunoverflow-y: scroll. -
Ritināmajā konteinerā pievienojiet
data-bs-spy="scroll"undata-bs-target="#navId"kurnavIdir unikālsidsaistītās navigācijas elements. Noteikti iekļaujiet arī atabindex="0", lai nodrošinātu piekļuvi tastatūrai. -
Ritinot “izspiegotu” konteineru,
.activesaistītajā navigācijā tiek pievienota klase un noņemta no enkura saitēm. Saitēm ir jābūt atrisināmiemidmērķiem, pretējā gadījumā tās tiek ignorētas. Piemēram,<a href="#home">home</a>ir jāatbilst kaut kam, piemēram, DOM<div id="home"></div> -
Mērķa elementi, kas nav redzami, tiks ignorēti. Skatiet tālāk sadaļu Neredzamie elementi .
Piemēri
Navigbar
Ritiniet apgabalu zem navigācijas joslas un skatieties, kā mainās aktīvā klase. Atveriet nolaižamo izvēlni un skatieties, ka tiek 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 bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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>
Ligzdota navigācija
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.
Ņemiet vērā, ka JavaScript spraudnis mēģina izvēlēties pareizo elementu starp visiem, kas var būt redzami. Vairāki redzami scrollspy mērķi vienlaikus var radīt dažas problēmas.
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.
Ņemiet vērā, ka JavaScript spraudnis mēģina izvēlēties pareizo elementu starp visiem, kas var būt redzami. Vairāki redzami scrollspy mērķi vienlaikus var radīt dažas problēmas.
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.
Ņemiet vērā, ka JavaScript spraudnis mēģina izvēlēties pareizo elementu starp visiem, kas var būt redzami. Vairāki redzami scrollspy mērķi vienlaikus var radīt dažas problēmas.
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.
Ņemiet vērā, ka JavaScript spraudnis mēģina izvēlēties pareizo elementu starp visiem, kas var būt redzami. Vairāki redzami scrollspy mērķi vienlaikus var radīt dažas problēmas.
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.
Ņemiet vērā, ka JavaScript spraudnis mēģina izvēlēties pareizo elementu starp visiem, kas var būt redzami. Vairāki redzami scrollspy mērķi vienlaikus var radīt dažas problēmas.
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.
Ņemiet vērā, ka JavaScript spraudnis mēģina izvēlēties pareizo elementu starp visiem, kas var būt redzami. Vairāki redzami scrollspy mērķi vienlaikus var radīt dažas problēmas.
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.
Ņemiet vērā, ka JavaScript spraudnis mēģina izvēlēties pareizo elementu starp visiem, kas var būt redzami. Vairāki redzami scrollspy mērķi vienlaikus var radīt dažas problēmas.
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
<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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="item-1">
<h4>Item 1</h4>
<p>...</p>
</div>
<div id="item-1-1">
<h5>Item 1-1</h5>
<p>...</p>
</div>
<div id="item-1-2">
<h5>Item 1-2</h5>
<p>...</p>
</div>
<div id="item-2">
<h4>Item 2</h4>
<p>...</p>
</div>
<div id="item-3">
<h4>Item 3</h4>
<p>...</p>
</div>
<div id="item-3-1">
<h5>Item 3-1</h5>
<p>...</p>
</div>
<div id="item-3-2">
<h5>Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>
</div>
Saraksta grupa
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 class="row">
<div class="col-4">
<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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
</div>
</div>
Vienkārši enkuri
Scrollspy neaprobežojas tikai ar navigācijas komponentiem un sarakstu grupām, tāpēc tas darbosies ar visiem <a>pašreizējā dokumenta enkura elementiem. Ritiniet apgabalu un skatieties, kā .activemainās 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.
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.
5. 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 class="row">
<div class="col-4">
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
<a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
<a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
<a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
<a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<h4 id="simple-list-item-1">Item 1</h4>
<p>...</p>
<h4 id="simple-list-item-2">Item 2</h4>
<p>...</p>
<h4 id="simple-list-item-3">Item 3</h4>
<p>...</p>
<h4 id="simple-list-item-4">Item 4</h4>
<p>...</p>
<h4 id="simple-list-item-5">Item 5</h4>
<p>...</p>
</div>
</div>
</div>
Neredzami elementi
Mērķa elementi, kas nav redzami, tiks ignorēti, un tiem atbilstošie navigācijas vienumi nesaņems .activemācību priekšmetu. Scrollspy gadījumi, kas inicializēti neredzamā iesaiņojumā, ignorēs visus mērķa elementus. Izmantojiet šo refreshmetodi, lai pārbaudītu, vai ir redzami elementi, kad iesaiņojums kļūst redzams.
document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
})
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 data-bs-targetatribūtu ar jebkura Bootstrap komponenta idvecākelementa vai klases nosaukumu ..nav
<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
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Iespējas
Tā kā opcijas var nodot, izmantojot datu atribūtus vai JavaScript, varat pievienot opcijas nosaukumu data-bs-, piemēram, data-bs-animation="{value}". Nododot opcijas, izmantojot datu atribūtus , noteikti nomainiet opcijas nosaukuma reģistra veidu no “ camelCase ” uz “ kebab-case ”. Piemēram, data-bs-custom-class="beautifier"izmantojiet data-bs-customClass="beautifier".
Sākot ar versiju Bootstrap 5.2.0, visi komponenti atbalsta eksperimentālu rezervēto datu atribūtu data-bs-config, kurā var ievietot vienkāršu komponentu konfigurāciju kā JSON virkni. Ja elementam ir atribūti data-bs-config='{"delay":0, "title":123}'un data-bs-title="456", galīgā titlevērtība būs 456un atsevišķie datu atribūti ignorēs vērtības, kas norādītas data-bs-config. Turklāt esošie datu atribūti var ietvert JSON vērtības, piemēram, data-bs-delay='{"show":0,"hide":150}'.
| Vārds | Tips | Noklusējums | Apraksts |
|---|---|---|---|
rootMargin |
virkne | 0px 0px -25% |
Krustojuma novērotāja saknes maržas derīgās vienības, aprēķinot ritināšanas pozīciju. |
smoothScroll |
Būla | false |
Iespējo vienmērīgu ritināšanu, kad lietotājs noklikšķina uz saites, kas attiecas uz ScrollSpy novērojumiem. |
target |
virkne, DOM elements | null |
Norāda elementu, kam lietot spraudni Scrollspy. |
threshold |
masīvs | [0.1, 0.5, 1] |
IntersectionObserver sliekšņa derīga ievade, aprēķinot ritināšanas pozīciju. |
Novecojušas opcijas
Līdz 5.1.3. versijai mēs izmantojām offset& methodopcijas, kuras tagad ir novecojušas un aizstātas ar rootMargin. Lai saglabātu atpakaļejošu saderību, mēs turpināsim parsēt doto offsetvērtību rootMargin, taču šī funkcija tiks noņemta versijā 6 .
Metodes
| Metode | Apraksts |
|---|---|
dispose |
Iznīcina elementa scrollspy. (Noņem DOM elementā saglabātos datus) |
getInstance |
Statiskā metode, lai iegūtu scrollspy gadījumu, kas saistīts ar DOM elementu. |
getOrCreateInstance |
Statiskā metode, lai iegūtu scrollspy gadījumu, kas saistīts ar DOM elementu, vai izveidot jaunu, ja tas nav inicializēts. |
refresh |
Pievienojot vai noņemot elementus DOM, jums būs jāizsauc atsvaidzināšanas metode. |
Šeit ir piemērs, izmantojot atsvaidzināšanas metodi:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Pasākumi
| Pasākums | Apraksts |
|---|---|
activate.bs.scrollspy |
Šis notikums tiek aktivizēts ritināšanas elementā ikreiz, kad scrollspy aktivizē enkuru. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})