Scrollspy
Nganyari kanthi otomatis navigasi Bootstrap utawa dhaptar komponen klompok adhedhasar posisi gulung kanggo nunjukake link endi sing lagi aktif ing viewport.
Cara kerjane
Scrollspy ngalih .activekelas ing anchor ( <a>) unsur nalika unsur karo idreferensi dening anchor kang hrefdigulung menyang tampilan. Scrollspy paling apik digunakake ing magepokan karo komponen Bootstrap nav utawa dhaftar klompok , nanging uga bakal bisa karo sembarang unsur anchor ing kaca saiki. Mangkene cara kerjane.
-
Kanggo miwiti, scrollspy mbutuhake rong perkara: pandhu arah, grup dhaptar, utawa sakumpulan pranala sing prasaja, ditambah karo wadhah sing bisa digulung. Wadah sing bisa digulung bisa dadi
<body>utawa unsur khusus kanthi setheightlanoverflow-y: scroll. -
Ing wadhah sing bisa digulung, tambahake
data-bs-spy="scroll"landata-bs-target="#navId"endinavIdsing unikidsaka pandhu arah sing gegandhengan. Aja manawa kanggo uga kalebutabindex="0"kanggo mesthekake akses keyboard. -
Nalika sampeyan nggulung wadhah "spied",
.activekelas ditambahake lan dibusak saka pranala anchor ing pandhu arah sing gegandhengan. Tautan kudu duweidtarget sing bisa ditanggulangi, yen ora digatekake. Contone,<a href="#home">home</a>kudu cocog karo soko ing DOM kaya<div id="home"></div> -
Unsur target sing ora katon bakal diabaikan. Waca bagean unsur Non-katon ing ngisor iki.
Tuladha
Navbar
Gulung area ing ngisor navbar lan nonton owah-owahan kelas aktif. Bukak menu gulung mudhun lan deleng item gulung mudhun uga disorot.
judhul pisanan
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
judhul kapindho
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
judhul katelu
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
judhul kaping papat
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Judhul kaping lima
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
<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>
Nested nav
Scrollspy uga dianggo karo nested .navs. .navYen ana susuh .active, wong tuwane uga .active. Gulung area ing jejere navbar lan nonton owah-owahan kelas aktif.
Item 1
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Elinga yen plugin JavaScript nyoba milih unsur sing bener ing antarane kabeh sing bisa katon. Multiple target scrollspy katon ing wektu sing padha bisa nimbulaké sawetara masalah.
Item 1-1
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Elinga yen plugin JavaScript nyoba milih unsur sing bener ing antarane kabeh sing bisa katon. Multiple target scrollspy katon ing wektu sing padha bisa nimbulaké sawetara masalah.
Item 1-2
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Elinga yen plugin JavaScript nyoba milih unsur sing bener ing antarane kabeh sing bisa katon. Multiple target scrollspy katon ing wektu sing padha bisa nimbulaké sawetara masalah.
Item 2
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Elinga yen plugin JavaScript nyoba milih unsur sing bener ing antarane kabeh sing bisa katon. Multiple target scrollspy katon ing wektu sing padha bisa nimbulaké sawetara masalah.
Item 3
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Elinga yen plugin JavaScript nyoba milih unsur sing bener ing antarane kabeh sing bisa katon. Multiple target scrollspy katon ing wektu sing padha bisa nimbulaké sawetara masalah.
Item 3-1
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Elinga yen plugin JavaScript nyoba milih unsur sing bener ing antarane kabeh sing bisa katon. Multiple target scrollspy katon ing wektu sing padha bisa nimbulaké sawetara masalah.
Item 3-2
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Elinga yen plugin JavaScript nyoba milih unsur sing bener ing antarane kabeh sing bisa katon. Multiple target scrollspy katon ing wektu sing padha bisa nimbulaké sawetara masalah.
<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>
Dhaptar klompok
Scrollspy uga dianggo karo .list-groups. Gulung area ing jejere grup dhaptar lan nonton owah-owahan kelas sing aktif.
Item 1
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Item 2
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Item 3
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Item 4
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
<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>
jangkar prasaja
Scrollspy ora winates nav komponen lan dhaftar kelompok, supaya bakal bisa ing sembarang <a>unsur anchor ing document saiki. Gulung area lan nonton owah- .activeowahan kelas.
Item 1
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Item 2
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Item 3
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Item 4
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
Item 5
Iki minangka sawetara isi placeholder kanggo kaca scrollspy. Elinga yen sampeyan nggulung mudhun kaca, pranala navigasi sing cocog bakal disorot. Dibaleni ing saindhenging conto komponen. Kita terus nambah salinan conto liyane ing kene kanggo nandheske nggulung lan nyorot.
<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>
Unsur sing ora katon
unsur Doel sing ora katon bakal digatèkaké lan item nav sing cocog ora bakal nampa .activekelas. Kedadean Scrollspy initialized ing pambungkus non-katon bakal nglirwakake kabeh unsur target. Gunakake refreshmetode kanggo mriksa unsur sing bisa diamati yen bungkus katon.
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()
})
})
Panggunaan
Liwat atribut data
Kanggo gampang nambah prilaku scrollspy kanggo pandhu arah topbar, nambah data-bs-spy="scroll"menyang unsur sing pengin Spy (paling biasane iki bakal <body>). Banjur tambahake data-bs-targetatribut kanthi jeneng idutawa kelas unsur induk saka .navkomponen Bootstrap.
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Liwat JavaScript
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Pilihan
Minangka opsi bisa liwati liwat atribut data utawa JavaScript, sampeyan bisa nambah jeneng pilihan kanggo data-bs-, kaya ing data-bs-animation="{value}". Priksa manawa kanggo ngganti jinis kasus jeneng pilihan saka " camelCase " kanggo " kebab-case " nalika ngliwati pilihan liwat atribut data. Contone, nggunakake data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".
Ing Bootstrap 5.2.0, kabeh komponen ndhukung atribut data sing dilindhungi eksperimendata-bs-config sing bisa ngemot konfigurasi komponen sing prasaja minangka string JSON. Nalika unsur duwe data-bs-config='{"delay":0, "title":123}'lan data-bs-title="456"atribut, titlenilai pungkasan bakal 456lan atribut data sing kapisah bakal ngilangi nilai sing diwenehake ing data-bs-config. Kajaba iku, atribut data sing ana bisa ngemot nilai JSON kaya data-bs-delay='{"show":0,"hide":150}'.
| jeneng | Jinis | Default | Katrangan |
|---|---|---|---|
rootMargin |
senar | 0px 0px -25% |
Intersection Observer rootMargin unit valid, nalika ngitung posisi gulung. |
smoothScroll |
boolean | false |
Mbisakake nggulung Gamelan nalika pangguna klik ing link sing nuduhake ScrollSpy observables. |
target |
string, elemen DOM | null |
Nemtokake unsur kanggo aplikasi Scrollspy plugin. |
threshold |
susunan | [0.1, 0.5, 1] |
IntersectionObserver ambang input bener, nalika ngetung posisi gulung. |
Opsi sing ora digunakake
Nganti v5.1.3 kita nggunakake offset& methodopsi, sing saiki ora digunakake lan diganti dening rootMargin. Kanggo njaga kompatibilitas sakdurunge, kita bakal terus kanggo parse diwenehi offsetkanggo rootMargin, nanging fitur iki bakal dibusak ing v6 .
Metode
| Metode | Katrangan |
|---|---|
dispose |
Ngancurake scrollspy unsur. (Mbusak data sing disimpen ing unsur DOM) |
getInstance |
Cara statis kanggo entuk conto scrollspy sing digandhengake karo unsur DOM. |
getOrCreateInstance |
Cara statis kanggo entuk conto scrollspy sing digandhengake karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti. |
refresh |
Nalika nambah utawa mbusak unsur ing DOM, sampeyan kudu nelpon cara refresh. |
Iki conto nggunakake metode refresh:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Acara
| Acara | Katrangan |
|---|---|
activate.bs.scrollspy |
Acara iki murub ing unsur gulung kapan anchor diaktifake dening scrollspy. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})