Scrollspy ya kosala
Mikolo oyo automatiquement navigation ya Bootstrap to ba composants ya groupe ya liste na kotalela position ya défilement mpo na kolakisa lien nini ezali activé actuellement na port de vue.
Ndenge oyo esalaka
Scrollspy ebalusaka .activekelasi na ba éléments ya anchor ( <a>) tango élément na oyo idezo référer na ba anchor's hrefezo défiler na vue. Scrollspy ezali malamu kosalelama elongo na composant nav ya Bootstrap to groupe ya liste , kasi ekosala mpe na ba éléments nionso ya anchor na page ya lelo. Tala ndenge esalaka.
-
Mpo na kobanda, scrollspy esɛngaka makambo mibale: navigation, groupe ya liste, to ensemble simple ya ba liens, bakisa mpe récipient oyo ekoki ko défiler. Conteneur oyo ekoki ko défiler ekoki kozala
<body>to élément personnalisé na ensembleheightmpeoverflow-y: scroll. -
Na récipient oyo ekoki ko défiler, bakisa
data-bs-spy="scroll"mpedata-bs-target="#navId"wapinavIdezali uniqueidya navigation oyo esangisi yango. Kobosana te mpe kotya atabindex="0"mpo na kosala ete okɔta na klavye. -
Ntango ozali kosala défilement na récipient “spied”,
.activekelasi moko ebakisami mpe elongolami na ba liens ya anchor na kati ya navigation oyo esangisi yango. Ba liens esengeli ezala naidba cibles résolvables, sinon ba ignorer yango. Par exemple, a<a href="#home">home</a>esengeli correspondre na eloko moko na DOM lokola<div id="home"></div> -
Ba éléments cibles oyo ezali komonana te ekozala ignoré. Tala eteni ya Biloko oyo emonanaka te na nse.
Bandakisa
Navbar
Défiler na esika oyo ezali na se ya navbar mpe tala mbongwana ya kelasi oyo ezali kosala. Fungola menu oyo ezali kokita mpe talá mpe biloko oyo ezali kokita ezala na elembo.
Motó ya likambo ya liboso
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Motó ya likambo ya mibale
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Motó ya likambo ya misato
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Motó ya likambo ya minei
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Motó ya likambo ya mitano
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
<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>
Nav oyo ekangami na kati
Scrollspy esalaka mpe na .navs oyo ekangami. Soki nested .navezali .active, baboti na yango mpe bakozala .active. Défiler na esika oyo ezali pembeni ya navbar mpe tala ndenge classe oyo ezali kosala ebongwana.
Likambo 1
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Kobosana te ete plugin ya JavaScript emekaka kopona eloko oyo ebongi na kati ya biloko nyonso oyo ekoki komonana. Ba cibles scrollspy oyo emonanaka ebele na mbala moko ekoki kobimisa mwa makambo.
Likambo 1-1
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Kobosana te ete plugin ya JavaScript emekaka kopona eloko oyo ebongi na kati ya biloko nyonso oyo ekoki komonana. Ba cibles scrollspy oyo emonanaka ebele na mbala moko ekoki kobimisa mwa makambo.
Likambo 1-2
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Kobosana te ete plugin ya JavaScript emekaka kopona eloko oyo ebongi na kati ya biloko nyonso oyo ekoki komonana. Ba cibles scrollspy oyo emonanaka ebele na mbala moko ekoki kobimisa mwa makambo.
Likambo ya 2
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Kobosana te ete plugin ya JavaScript emekaka kopona eloko oyo ebongi na kati ya biloko nyonso oyo ekoki komonana. Ba cibles scrollspy oyo emonanaka ebele na mbala moko ekoki kobimisa mwa makambo.
Likambo ya 3
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Kobosana te ete plugin ya JavaScript emekaka kopona eloko oyo ebongi na kati ya biloko nyonso oyo ekoki komonana. Ba cibles scrollspy oyo emonanaka ebele na mbala moko ekoki kobimisa mwa makambo.
Likambo 3-1
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Kobosana te ete plugin ya JavaScript emekaka kopona eloko oyo ebongi na kati ya biloko nyonso oyo ekoki komonana. Ba cibles scrollspy oyo emonanaka ebele na mbala moko ekoki kobimisa mwa makambo.
Likambo 3-2
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Kobosana te ete plugin ya JavaScript emekaka kopona eloko oyo ebongi na kati ya biloko nyonso oyo ekoki komonana. Ba cibles scrollspy oyo emonanaka ebele na mbala moko ekoki kobimisa mwa makambo.
<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>
Liste ya groupe
Scrollspy esalaka mpe na .list-groups. Salá défilement na esika oyo ezali pembeni ya etuluku ya liste mpe talá mbongwana ya kelasi oyo ezali kosala.
Likambo 1
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Likambo ya 2
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Likambo ya 3
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Likambo ya 4
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
<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>
Ba ancres ya pete
Scrollspy esuka kaka te na ba composants nav na ba groupes ya liste, yango wana ekosala na ba <a>éléments nionso ya anchor na mokanda ya lelo. Salá défilement na esika yango mpe talá ndenge .activekelasi ezali kobongwana.
Likambo 1
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Likambo ya 2
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Likambo ya 3
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Likambo ya 4
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
Likambo ya 5
Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.
<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>
Ba éléments oyo emonanaka te
Ba éléments cibles oyo ezali komonana te ekozala ignoré mpe ba éléments nav na bango oyo ekokani ekozua .activeclasse te. Ba instances ya Scrollspy oyo ebandisami na enveloppe oyo emonanaka te eko ignorer ba éléments cibles nionso. Salelá refreshmayele yango mpo na kotala soki ezali na biloko oyo ekoki komonana ntango enveloppe ekómi komonana.
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()
})
})
Kosalela yango
Na nzela ya ba attributs ya ba données
Mpo na kobakisa na pete bizaleli ya scrollspy na navigation na yo ya topbar, bakisa data-bs-spy="scroll"na élément oyo olingi kosala espionnage (mingi mingi oyo ekozala na <body>). Na sima bakisa data-bs-targetattribut na idto kombo ya classe ya élément parent ya .navcomposant nionso ya 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>
Na nzela ya JavaScript
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Makambo oyo okoki kopona
Lokola ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript, okoki kobakisa kombo ya option na data-bs-, lokola na data-bs-animation="{value}". Sala makasi o changer type ya cas ya kombo ya option depuis “ camelCase ” na “ kebab-case ” tango ozali koleka ba options via ba attributs ya ba données. Na ndakisa, salelá data-bs-custom-class="beautifier"na esika ya data-bs-customClass="beautifier".
Kobanda na Bootstrap 5.2.0, ba composants nionso esungaka attribut ya ba données réservées expérimentalesdata-bs-config oyo ekoki ko louer configuration ya composant simple lokola chaîne JSON. Tango élément moko ezali data-bs-config='{"delay":0, "title":123}'na na ba data-bs-title="456"attributs, valeur ya suka titleekozala 456mpe ba attributs ya ba données separates eko overrider ba valeurs oyo epesami na data-bs-config. En plus, ba attributs ya ba données oyo ezali ezali capable ya ko louer ba valeurs JSON lokola data-bs-delay='{"show":0,"hide":150}'.
| Nkombo | Lolenge | Mbeba | Ndimbola |
|---|---|---|---|
rootMargin |
shene | 0px 0px -25% |
Intersection Observer rootMargin ba unité valides, tango ya kosala calcul ya position ya défilement. |
smoothScroll |
boolean | false |
Ezali kopesa nzela na kosala défilement malamu ntango mosaleli azali kofina lien oyo ezali kolobela makambo oyo ekoki komonana na ScrollSpy. |
target |
molongo, eleman ya DOM | null |
Ezali kolakisa eleman mpo na kosalela plugin ya Scrollspy. |
threshold |
array | [0.1, 0.5, 1] |
IntersectionObserver seuil ya entrée valide, tango ya kosala calcul ya position ya défilement. |
Ba Options oyo esili kosalelama te
Kino na v5.1.3 tozalaki kosalela offset& methodoptions, oyo ezali sikoyo déprecated mpe e remplacé na rootMargin. Mpo na kobatela boyokani ya nsima, tokokoba ko parser a given offsetto rootMargin, kasi fonctionnalité oyo ekolongolama na v6 .
Ba méthodes ya kosala
| Metode | Ndimbola |
|---|---|
dispose |
Ebebisaka scrollspy ya élément moko. (Elongolaka ba données oyo ebombami na élément DOM) |
getInstance |
Méthode statique pona kozua instance ya scrollspy oyo ezo sangana na élément DOM. |
getOrCreateInstance |
Méthode statique pona kozua instance ya scrollspy oyo ezo sangana na élément DOM, to ko créer ya sika au cas où ezalaki initialisé te. |
refresh |
Ntango ozali kobakisa to kolongola biloko na DOM, ekosɛnga obenga lolenge ya kozongisa sika. |
Tala ndakisa oyo esalelaka mayele ya kozongisa sika:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Makambo oyo esalemaki
| Likambo | Ndimbola |
|---|---|
activate.bs.scrollspy |
Evenement oyo ezo beta na élément ya défilement chaque fois que ancre moko ezo activer na scrollspy. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})