Scrollspy
Aghjurnate automaticamente a navigazione Bootstrap o i cumpunenti di u gruppu di lista basatu nantu à a pusizione di scroll per indicà quale ligame hè attualmente attivu in a finestra di vista.
Cumu funziona
Scrollspy hà uni pochi di esigenze per funziunà bè:
- Deve esse usatu in un cumpunente di navigazione Bootstrap o un gruppu di lista .
- Scrollspy richiede
position: relative;
l'elementu chì spia, di solitu u<body>
. - L'ancore (
<a>
) sò necessarii è deve indicà un elementu cun quelluid
.
Quandu hè implementatu cù successu, u vostru gruppu di navigazione o di lista hà da aghjurnà in cunseguenza, movendu a .active
classe da un articulu à l'altru basatu nantu à i so miri assuciati.
Contenituri scrollable è accessu à u teclatu
Sè vo site un cuntainer scrollable (alcuni da u <body>
), assicuratevi di avè un height
set è overflow-y: scroll;
appiicatu à questu, à fiancu à un tabindex="0"
per assicurà l'accessu à u teclatu.
Esempiu in a barra di navigazione
Scroll the area below the navbar and watch the active class change. L'articuli dropdown seranu ancu evidenziati.
Prima rubrica
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Seconda rubrica
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Terzu capu
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Quarta rubrica
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Quinta rubrica
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
<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>
Esempiu cù nav nidificatu
Scrollspy travaglia ancu cù .nav
s nidificati. Se un nidificatu .nav
hè .active
, i so genitori seranu ancu .active
. Scorri l'area accantu à a barra di navigazione è fighjate u cambiamentu di classa attiva.
Articulu 1
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Elementu 1-1
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Elementu 1-2
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Articulu 2
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Articulu 3
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Articulu 3-1
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Elementu 3-2
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
<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>
Esempiu cù list-group
Scrollspy travaglia dinù cù .list-group
s. Scorri l'area accantu à u gruppu di lista è fighjate u cambiamentu di classa attiva.
Articulu 1
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Articulu 2
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Articulu 3
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
Articulu 4
Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.
<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>
Usu
Via attributi di dati
Per aghjunghje facilmente u cumpurtamentu scrollspy à a vostra navigazione in cima, aghjunghje data-bs-spy="scroll"
à l'elementu chì vulete spià (a più tipica questu seria u <body>
). Allora aghjunghje l' data-bs-target
attributu cù l'ID o a classa di l'elementu parent di qualsiasi .nav
cumpunente Bootstrap.
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>
Via JavaScript
Dopu avè aghjustatu position: relative;
in u vostru CSS, chjamate scrollspy via JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Obiettivi di ID risolvibili necessarii
I ligami di Navbar anu da avè target id risolvibili. Per esempiu, un <a href="#home">home</a>
deve currisponde à qualcosa in u DOM cum'è <div id="home"></div>
.
Elementi di destinazione micca visibili ignorati
L'elementi di destinazione chì ùn sò micca visibili seranu ignorati è i so elementi di navigazione currispondenti ùn saranu mai evidenziati.
I metudi
rinfriscà
Quandu si usa scrollspy in cunghjunzione cù l'aghjunzione o l'eliminazione di elementi da u DOM, avete bisognu di chjamà u metudu di rinfrescante cusì:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
disposti
Distrughje u scrollspy di un elementu. (Elimina i dati almacenati nantu à l'elementu DOM)
getInstance
Metudu staticu chì permette di ottene l'istanza scrollspy assuciata à un elementu DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Metudu staticu chì permette di ottene l'istanza scrollspy assuciata à un elementu DOM, o creanu un novu in casu ùn hè micca inizializatu
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Opzioni
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-bs-
, cum'è in data-bs-offset=""
.
Nome | Tipu | Default | Descrizzione |
---|---|---|---|
offset |
numeru | 10 |
Pixel per compensà da a cima quandu calcula a pusizione di scroll. |
method |
stringa | auto |
Trova in quale sezione si trova l'elementu spiatu auto , sceglie u megliu metudu per uttene coordenate di scroll. offset aduprà u Element.getBoundingClientRect() metudu per uttene coordenate di scroll. position utilizerà HTMLElement.offsetTop e HTMLElement.offsetLeft proprietà per uttene coordenate di scroll. |
target |
stringa | oggettu jQuery | Elementu DOM | Specifica l'elementu per applicà u plugin Scrollspy. |
Avvenimenti
Tipu di avvenimentu | Descrizzione |
---|---|
activate.bs.scrollspy |
Questu avvenimentu spara nantu à l'elementu di scroll ogni volta chì un novu articulu hè attivatu da u scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})