Scrollspy
Aŭtomate ĝisdatigu Bootstrap-navigadon aŭ listigu grupkomponentojn surbaze de rulpozicio por indiki kiu ligilo estas nuntempe aktiva en la vidfenestro.
Kiel ĝi funkcias
Scrollspy havas kelkajn postulojn por funkcii ĝuste:
- Ĝi devas esti uzata en Bootstrap nav-komponento aŭ listogrupo .
- Scrollspy postulas
position: relative;sur la elemento, kiun vi spionas, kutime la<body>. - Ankroj (
<a>) estas postulataj kaj devas montri elementon kun tioid.
Kiam sukcese efektivigita, via navigacio aŭ listgrupo ĝisdatigos laŭe, movante la .activeklason de unu objekto al la sekva surbaze de iliaj rilataj celoj.
Rulumeblaj ujoj kaj klavara aliro
Se vi faras ruligeblan ujon (krom la <body>), nepre havi heightaron kaj overflow-y: scroll;aplikitan al ĝi—kune tabindex="0"por certigi klavaran aliron.
Ekzemplo en navbar
Rulumu la areon sub la navbar kaj rigardu la aktivan klasŝanĝon. La menumenuoj ankaŭ estos reliefigitaj.
Unua titolo
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Dua rubriko
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Tria rubriko
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Kvara titolo
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Kvina titolo
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
<nav id="navbar-example2" class="navbar navbar-light bg-light px-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-offset="0" class="scrollspy-example" 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>
Ekzemplo kun nestita navigacio
Scrollspy ankaŭ funkcias kun nestitaj .navs. Se nesto .navestas .active, ĝiaj gepatroj ankaŭ estos .active. Rulumu la areon apud la navbar kaj rigardu la aktivan klasŝanĝon.
Item 1
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 1-1
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 1-2
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 2
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 3
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 3-1
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 3-2
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Navbar</a>
<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 data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
Ekzemplo kun listo-grupo
Scrollspy ankaŭ funkcias kun .list-groups. Rulumu la areon apud la listogrupo kaj rigardu la aktivan klasŝanĝon.
Item 1
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 2
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 3
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
Item 4
Ĉi tio estas iu lokokupilo enhavo por la scrollspy paĝo. Notu, ke dum vi rulumas malsupren la paĝon, la taŭga navigada ligilo estas reliefigita. Ĝi estas ripetita ĉie en la komponentekzemplo. Ni daŭre aldonas plian ekzemplan kopion ĉi tie por emfazi la ruladon kaj reliefigon.
<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 data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" 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>
Uzado
Per datumaj atributoj
Por facile aldoni scrollspy-konduton al via supra navigado, aldonu data-bs-spy="scroll"al la elemento, kiun vi volas spioni (plej kutime ĉi tio estus la <body>). Tiam aldonu la data-bs-targetatributon kun la ID aŭ klaso de la gepatra elemento de iu ajn Bootstrap- .navkomponento.
body {
position: relative;
}
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Per JavaScript
Post aldoni position: relative;vian CSS, voku la scrollspy per JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Solveblaj ID-celoj bezonataj
Navbar-ligiloj devas havi solveblajn id-celojn. Ekzemple, <a href="#home">home</a>devas respondi al io en la DOM kiel <div id="home"></div>.
Nevideblaj celelementoj ignoritaj
Celelementoj ne videblaj estos ignoritaj kaj iliaj respondaj nav-eroj neniam estos reliefigitaj.
Metodoj
refreŝigi
Kiam vi uzas scrollspy kune kun aldono aŭ forigo de elementoj de la DOM, vi devos nomi la refreŝigan metodon tiel:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
disponi
Detruas la scrollspy de elemento. (Forigas konservitajn datumojn sur la DOM-elemento)
getInstance
Senmova metodo, kiu permesas vin akiri la scrollspy-instancon asociitan kun DOM-elemento
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Senmova metodo, kiu ebligas al vi akiri la scrollspy-instancon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita.
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Opcioj
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-, kiel en data-bs-offset="".
| Nomo | Tajpu | Defaŭlte | Priskribo |
|---|---|---|---|
offset |
nombro | 10 |
Pikseloj por kompensi de supro dum kalkulado de pozicio de rullibro. |
method |
ŝnuro | auto |
Trovas en kiu sekcio troviĝas la spionita elemento. autoelektos la plej bonan metodon por akiri rulkoordinatojn. offsetuzos la Element.getBoundingClientRect()metodon por akiri rulkoordinatojn. positionuzos la HTMLElement.offsetTopkaj HTMLElement.offsetLeftecojn por akiri rulkoordinatojn. |
target |
ŝnuro | jQuery objekto | DOM-elemento | Specifas elementon por apliki Scrollspy kromaĵon. |
Eventoj
| Eventa tipo | Priskribo |
|---|---|
activate.bs.scrollspy |
Ĉi tiu evento pafas sur la rul-elemento kiam ajn nova objekto estas aktivigita de la scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})