Scrollspy
Ngamutahirkeun otomatis navigasi Bootstrap atawa daptar komponén grup dumasar kana posisi gulung pikeun nunjukkeun link mana nu ayeuna aktip dina viewport nu.
Kumaha gawéna
Scrollspy toggles .activekelas on jangkar ( <a>) elemen lamun unsur jeung idreferenced ku jangkar urang hrefscrolled kana pintonan. Scrollspy ieu pangalusna dipaké ditéang jeung komponén Bootstrap nav atawa grup daptar , tapi ogé bakal dianggo kalayan sagala elemen jangkar dina kaca ayeuna. Kieu kumaha jalanna.
-
Pikeun ngamimitian, scrollspy butuh dua hal: navigasi, grup daptar, atanapi sakumpulan tautan anu sederhana, ditambah wadah anu tiasa digulung. Wadahna anu tiasa digulung tiasa janten
<body>atanapi unsur khusus sareng setheightsarengoverflow-y: scroll. -
Dina wadahna scrollable, tambahkeun
data-bs-spy="scroll"nadata-bs-target="#navId"dimananavIdunikidtina navigasi pakait. Pastikeun ogé kaasup atabindex="0"pikeun mastikeun aksés keyboard. -
Anjeun ngagulung wadahna "spied", hiji
.activekelas ditambahkeun jeung dipiceun tina link jangkar dina navigasi pakait. Tumbu kudu bogaidtarget resolvable, disebutkeun aranjeunna nuju dipaliré. Contona, hiji<a href="#home">home</a>kudu pakait jeung hal di DOM kawas<div id="home"></div> -
Unsur target anu henteu katingali bakal dipaliré. Tempo bagian Non-katingali elemen handap.
Contona
Navbar
Gulung wewengkon handap navbar jeung lalajo robah kelas aktip. Buka menu lungsur sareng tingali item lungsur ogé disorot.
Judul kahiji
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Judul kadua
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Judul katilu
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Judul kaopat
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Judul kalima
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng 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 ogé jalan kalawan nested .navs. Lamun sarang .navtéh .active, kolotna ogé bakal .active. Gulung wewengkon gigireun navbar jeung lalajo robah kelas aktip.
Barang 1
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Émut yén plugin JavaScript nyobian milih unsur anu leres diantara sadayana anu tiasa katingali. Sababaraha target scrollspy anu katingali dina waktos anu sami tiasa nyababkeun sababaraha masalah.
Item 1-1
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Émut yén plugin JavaScript nyobian milih unsur anu leres diantara sadayana anu tiasa katingali. Sababaraha target scrollspy anu katingali dina waktos anu sami tiasa nyababkeun sababaraha masalah.
Item 1-2
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Émut yén plugin JavaScript nyobian milih unsur anu leres diantara sadayana anu tiasa katingali. Sababaraha target scrollspy anu katingali dina waktos anu sami tiasa nyababkeun sababaraha masalah.
Barang 2
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Émut yén plugin JavaScript nyobian milih unsur anu leres diantara sadayana anu tiasa katingali. Sababaraha target scrollspy anu katingali dina waktos anu sami tiasa nyababkeun sababaraha masalah.
Barang 3
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Émut yén plugin JavaScript nyobian milih unsur anu leres diantara sadayana anu tiasa katingali. Sababaraha target scrollspy anu katingali dina waktos anu sami tiasa nyababkeun sababaraha masalah.
Item 3-1
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Émut yén plugin JavaScript nyobian milih unsur anu leres diantara sadayana anu tiasa katingali. Sababaraha target scrollspy anu katingali dina waktos anu sami tiasa nyababkeun sababaraha masalah.
Item 3-2
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Émut yén plugin JavaScript nyobian milih unsur anu leres diantara sadayana anu tiasa katingali. Sababaraha target scrollspy anu katingali dina waktos anu sami tiasa nyababkeun sababaraha 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>
Daptar grup
Scrollspy ogé jalan kalawan .list-groups. Gulung wewengkon gigireun grup daptar tur lalajo robah kelas aktip.
Barang 1
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Barang 2
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Barang 3
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
barang 4
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng 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 basajan
Scrollspy henteu dugi ka komponén nav jeung grup daptar, ku kituna bakal dianggo dina sagala <a>elemen jangkar dina dokumen ayeuna. Gulung wewengkon sarta lalajo .activerobah kelas.
Barang 1
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Barang 2
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
Barang 3
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
barang 4
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng nyorot.
barang 5
Ieu sababaraha eusi placeholder pikeun kaca scrollspy. Catet yén nalika anjeun ngagulung ka handap halaman, tautan navigasi anu pas disorot. Ieu terus-terusan sapanjang conto komponén. Kami terus nambihan sababaraha conto salinan di dieu pikeun ngantebkeun ngagulung sareng 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 anu teu katingali
elemen target nu teu katingali bakal dipaliré jeung item nav saluyu maranéhna moal nampi hiji .activekelas. instansi Scrollspy initialized dina wrapper non-katingali bakal malire sakabeh elemen target. Anggo refreshmetodeu pikeun mariksa unsur anu tiasa dititénan saatos bungkusna katingali.
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()
})
})
Pamakéan
Via atribut data
Pikeun gampang nambahkeun kabiasaan scrollspy kana navigasi topbar Anjeun, tambahkeun data-bs-spy="scroll"ka elemen rék nénjo dina (paling ilaharna ieu bakal jadi <body>). Teras tambahkeun data-bs-targetatribut sareng idnami kelas atanapi unsur induk tina .navkomponén 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>
Ngaliwatan JavaScript
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Pilihan
Salaku pilihan bisa diliwatan via atribut data atawa JavaScript, anjeun bisa append hiji ngaran pilihan pikeun data-bs-, sakumaha dina data-bs-animation="{value}". Pastikeun pikeun ngarobah tipe kasus tina ngaran pilihan tina " camelCase " pikeun " kebab-case " nalika ngalirkeun pilihan ngaliwatan atribut data. Contona, make data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".
Salaku Bootstrap 5.2.0, sadaya komponén ngarojong hiji atribut data ditangtayungan eksperimendata-bs-config nu bisa imah konfigurasi komponén basajan salaku string JSON. Lamun hiji unsur boga data-bs-config='{"delay":0, "title":123}'jeung data-bs-title="456"atribut, nilai final titlebakal 456jeung atribut data misah bakal override nilai dibikeun dina data-bs-config. Salaku tambahan, atribut data anu aya tiasa ngeusian nilai JSON sapertos data-bs-delay='{"show":0,"hide":150}'.
| Ngaran | Tipe | Default | Katerangan |
|---|---|---|---|
rootMargin |
senar | 0px 0px -25% |
Intersection Observer rootMargin unit valid, nalika ngitung posisi gulung. |
smoothScroll |
boolean | false |
Ngaktifkeun ngagulung lancar nalika pangguna ngaklik tautan anu ngarujuk kana observasi ScrollSpy. |
target |
string, unsur DOM | null |
Nangtukeun elemen pikeun nerapkeun Scrollspy plugin. |
threshold |
susunan | [0.1, 0.5, 1] |
IntersectionObserver ambang input valid, nalika ngitung posisi gulung. |
Pilihan Deprecated
Nepi ka v5.1.3 kami nganggo offset& methodpilihan, nu ayeuna deprecated tur diganti ku rootMargin. Pikeun ngajaga kasaluyuan mundur, urang bakal neruskeun parse a masihan offsetka rootMargin, tapi fitur ieu bakal dihapus dina v6 .
Métode
| Métode | Katerangan |
|---|---|
dispose |
Ngancurkeun scrollspy unsur urang. (Ngahapus data anu disimpen dina unsur DOM) |
getInstance |
Metoda statik pikeun meunangkeun conto scrollspy pakait sareng unsur DOM. |
getOrCreateInstance |
Metoda statik pikeun meunangkeun conto scrollspy pakait sareng unsur DOM, atawa nyieun nu anyar bisi teu initialized. |
refresh |
Nalika nambihan atanapi ngahapus elemen dina DOM, anjeun kedah nyauran metode refresh. |
Ieu conto nganggo metode refresh:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Kajadian
| Acara | Katerangan |
|---|---|
activate.bs.scrollspy |
Ieu acara seuneu dina unsur ngagugulung iraha hiji jangkar diaktipkeun ku scrollspy. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})