Scrollspy
Otomatikman mete ajou navigasyon Bootstrap oswa lis eleman gwoup ki baze sou pozisyon woulo liv la pou endike ki lyen ki aktif kounye a nan fenèt la.
Ki jan li fonksyone
Scrollspy baskle .activeklas la sou eleman jete lank ( <a>) lè eleman ki fè idreferans lan jete lank la hrefdefile nan gade. Scrollspy se pi byen itilize ansanm ak yon eleman nav Bootstrap oswa gwoup lis , men li pral travay tou ak nenpòt eleman jete lank nan paj aktyèl la. Men ki jan li fonksyone.
-
Pou kòmanse, scrollspy mande de bagay: yon navigasyon, gwoup lis, oswa yon seri lyen senp, plis yon veso defilable. Kontenè defile a kapab
<body>oswa yon eleman koutim ak yon seriheightakoverflow-y: scroll. -
Sou veso defile a, ajoute
data-bs-spy="scroll"epi kidata-bs-target="#navId"kotenavIdinikidnavigasyon ki asosye a. Asire w ou genyen tou yontabindex="0"pou asire aksè klavye. -
Pandan w ap woule veso "espyone",
.activeyo ajoute yon klas epi retire l nan lyen jete lank nan navigasyon ki asosye a. Lyen yo dwe genidsib ki ka rezoud, otreman yo ap inyore. Pou egzanp, yon<a href="#home">home</a>dwe koresponn ak yon bagay nan DOM la tankou<div id="home"></div> -
Eleman sib ki pa vizib yo pral inyore. Gade seksyon eleman ki pa vizib ki anba a.
Egzanp yo
Navbar
Scroll zòn ki anba a navbar epi gade chanjman nan klas aktif. Louvri meni deroule a epi gade atik deroulan yo mete aksan sou tou.
Premye tit
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Dezyèm tit
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Twazyèm tit
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Katriyèm tit
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Senkyèm tit
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
<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>
Anbrike nav
Scrollspy travay tou ak .navs enbrike. Si yon enbrike .navse .active, paran li yo pral tou .active. Scroll zòn nan akote navbar la epi gade chanjman nan klas aktif.
Atik 1
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Kenbe nan tèt ou ke Plugin nan JavaScript eseye chwazi eleman ki dwat nan mitan tout sa ki ka vizib. Plizyè objektif scrollspy vizib an menm tan an ka lakòz kèk pwoblèm.
Atik 1-1
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Kenbe nan tèt ou ke Plugin nan JavaScript eseye chwazi eleman ki dwat nan mitan tout sa ki ka vizib. Plizyè objektif scrollspy vizib an menm tan an ka lakòz kèk pwoblèm.
Atik 1-2
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Kenbe nan tèt ou ke Plugin nan JavaScript eseye chwazi eleman ki dwat nan mitan tout sa ki ka vizib. Plizyè objektif scrollspy vizib an menm tan an ka lakòz kèk pwoblèm.
Atik 2
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Kenbe nan tèt ou ke Plugin nan JavaScript eseye chwazi eleman ki dwat nan mitan tout sa ki ka vizib. Plizyè objektif scrollspy vizib an menm tan an ka lakòz kèk pwoblèm.
Atik 3
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Kenbe nan tèt ou ke Plugin nan JavaScript eseye chwazi eleman ki dwat nan mitan tout sa ki ka vizib. Plizyè objektif scrollspy vizib an menm tan an ka lakòz kèk pwoblèm.
Atik 3-1
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Kenbe nan tèt ou ke Plugin nan JavaScript eseye chwazi eleman ki dwat nan mitan tout sa ki ka vizib. Plizyè objektif scrollspy vizib an menm tan an ka lakòz kèk pwoblèm.
Atik 3-2
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Kenbe nan tèt ou ke Plugin nan JavaScript eseye chwazi eleman ki dwat nan mitan tout sa ki ka vizib. Plizyè objektif scrollspy vizib an menm tan an ka lakòz kèk pwoblèm.
<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>
Lis gwoup
Scrollspy travay tou ak .list-groups. Scroll zòn ki akote gwoup lis la epi gade chanjman nan klas aktif.
Atik 1
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 2
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 3
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 4
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
<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>
Lankr senp
Scrollspy se pa sa sèlman konpozan nav ak gwoup lis, kidonk li pral travay sou nenpòt <a>eleman jete lank nan dokiman aktyèl la. Scroll zòn nan epi gade .activeklas la chanje.
Atik 1
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 2
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 3
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 4
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
Atik 5
Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.
<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>
Eleman ki pa vizib
Eleman sib ki pa vizib yo pral inyore epi atik nav korespondan yo p ap resevwa yon .activeklas. Ka Scrollspy inisyalize nan yon anbalaj ki pa vizib pral inyore tout eleman sib yo. Sèvi ak refreshmetòd la pou tcheke pou eleman obsèvab yon fwa anbalaj la vin vizib.
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()
})
})
Itilizasyon
Via atribi done yo
Pou ajoute fasilman konpòtman scrollspy nan navigasyon topbar ou a, ajoute data-bs-spy="scroll"nan eleman ou vle al rekonèt (pi tipikman sa a ta dwe <body>). Lè sa a, ajoute data-bs-targetatribi a ak idnon klas la nan eleman paran nenpòt .naveleman 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>
Via JavaScript
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Opsyon
Kòm opsyon yo ka pase atravè atribi done oswa JavaScript, ou ka ajoute yon non opsyon nan data-bs-, tankou nan data-bs-animation="{value}". Asire w ke w chanje kalite ka non opsyon an soti nan " camelCase " a " kebab-case " lè w ap pase opsyon yo atravè atribi done yo. Pa egzanp, sèvi ak data-bs-custom-class="beautifier"olye de data-bs-customClass="beautifier".
Apati Bootstrap 5.2.0, tout konpozan sipòte yon eksperimantal atribi done rezève data-bs-configki ka loje konfigirasyon eleman senp kòm yon kòd JSON. Lè yon eleman gen data-bs-config='{"delay":0, "title":123}'ak data-bs-title="456"atribi, titlevalè final la pral 456ak atribi done separe yo pral pase sou valè yo bay sou data-bs-config. Anplis de sa, atribi done ki egziste deja yo kapab loje valè JSON tankou data-bs-delay='{"show":0,"hide":150}'.
| Non | Kalite | Default | Deskripsyon |
|---|---|---|---|
rootMargin |
fisèl | 0px 0px -25% |
Entèseksyon Obsèvatè rootMargin inite valab, lè w ap kalkile pozisyon woulo liv la. |
smoothScroll |
booleyen | false |
Pèmèt defile lis lè yon itilizatè klike sou yon lyen ki refere a ScrollSpy observables. |
target |
fisèl, eleman DOM | null |
Espesifye eleman pou aplike Plugin Scrollspy. |
threshold |
etalaj | [0.1, 0.5, 1] |
IntersectionObserver papòt opinyon ki valab, lè w ap kalkile pozisyon woulo liv la. |
Opsyon depreche
Jiska v5.1.3 nou te itilize offset& methodopsyon, ki kounye a depreche epi ranplase pa rootMargin. Pou kenbe konpatibilite bak, nou pral kontinye analize yon bay offsetnan rootMargin, men karakteristik sa a pral retire nan v6 .
Metòd
| Metòd | Deskripsyon |
|---|---|
dispose |
Detwi scrollspy yon eleman. (Retire done ki estoke sou eleman DOM) |
getInstance |
Metòd estatik pou jwenn egzanp scrollspy ki asosye ak yon eleman DOM. |
getOrCreateInstance |
Metòd estatik pou jwenn egzanp scrollspy ki asosye ak yon eleman DOM, oswa pou kreye yon nouvo nan ka li pa te inisyalize. |
refresh |
Lè w ajoute oswa retire eleman nan DOM, w ap bezwen rele metòd rafrechisman an. |
Men yon egzanp lè l sèvi avèk metòd rafrechisman an:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Evènman
| Evènman | Deskripsyon |
|---|---|
activate.bs.scrollspy |
Evènman sa a dife sou eleman woulo liv la chak fwa yon lank aktive pa scrollspy la. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})