Guida per Principianti su Bootstrap - Scrollspy

Ciao a tutti, aspiranti sviluppatori web! Oggi esploreremo una caratteristiche affascinante di Bootstrap chiamata Scrollspy. Non preoccupatevi se siete nuovi alla programmazione - vi guiderò attraverso questo argomento passo dopo passo, proprio come ho fatto per i miei studenti negli anni. Allora, prendete una tazza di caffè e cominciamo!

Bootstrap - Scrollspy

Cos'è Scrollspy?

Prima di immergerci nei dettagli tecnici, capiremo cos'è Scrollspy. Immagina di leggere un lungo articolo online e, mentre scrolli, il menu di navigazione evidenzia automaticamente la sezione che stai leggendo in questo momento. Questo è Scrollspy in azione! È una piccola funzionalità utile che migliora l'esperienza utente fornendo un feedback visivo sulla posizione corrente dell'utente all'interno del contenuto.

Come Funziona

Scrollspy funziona monitorando la posizione di scorrimento della tua pagina web e aggiornando lo stato attivo dei tuoi elementi di navigazione di conseguenza. È come avere un piccolo spia (da cui il nome!) che osserva dove ti trovi sulla pagina e dice al tuo menu di navigazione, "Ehi, l'utente è qui ora!"

Guardiamo un esempio di base:

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#section1">Sezione 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Sezione 2</a></li>
</ul>
</div>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
<h4 id="section1">Sezione 1</h4>
<p>...</p>
<h4 id="section2">Sezione 2</h4>
<p>...</p>
</div>
</body>

In questo esempio, stiamo dicendo a Bootstrap di spiare la posizione di scorrimento (data-bs-spy="scroll") e aggiornare la navigazione in #navbar-example. Mentre scrolli attraverso il contenuto, l'elemento nav corrispondente sarà evidenziato.

Navbar

Una delle användningar più comuni di Scrollspy è con una barra di navigazione. guardiamo un esempio più dettagliato:

<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">Primo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Secondo</a>
</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">Primo intestazione</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Secondo intestazione</h4>
<p>...</p>
</div>

In questo esempio, abbiamo una barra di navigazione con due link. Mentre scrolli attraverso il contenuto, l'elemento della barra di navigazione corrispondente sarà evidenziato. È come avere un GPS per la tua pagina web!

Navigazione Annidata

A volte, potresti voler avere elementi di navigazione annidati. Anche Scrollspy può gestire questo! Ecco come:

<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">Elemento 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Elemento 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Elemento 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Elemento 2</a>
</nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Elemento 1</h4>
<p>...</p>
<h5 id="item-1-1">Elemento 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Elemento 1-2</h5>
<p>...</p>
<h4 id="item-2">Elemento 2</h4>
<p>...</p>
</div>

Questo crea una struttura di navigazione annidata che si aggiorna mentre scrolli attraverso diverse sezioni e sottosezioni. È come avere capitoli e sottocapitoli in un libro, ma interattivi!

Gruppo di Elementi

Scrollspy non è limitato solo alle barre di navigazione. Puoi usarlo anche con gruppi di elementi:

<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Elemento 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Elemento 2</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">Elemento 1</h4>
<p>...</p>
<h4 id="list-item-2">Elemento 2</h4>
<p>...</p>
</div>

Questo crea un gruppo di elementi che si aggiorna mentre scrolli attraverso il contenuto. È come avere un indice che sa esattamente dove ti trovi nel libro!

Simple Anchors

A volte, potresti voler usare semplici link di ancora invece di una barra di navigazione completa o un gruppo di elementi:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
</div>

Questo crea semplici link di ancora che si aggiornano mentre scrolli. È come avere segnalibri nella tua pagina web che si accendono quando li raggiungi!

Elementi Non Visibili

Scrollspy può funzionare anche con elementi che non sono visibili all'inizio:

<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="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">uno</h4>
<p>...</p>
<h4 id="two">due</h4>
<p>...</p>
<h4 id="three">tre</h4>
<p>...</p>
</div>

<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example2'
})
</script>

In questo esempio, anche se alcuni elementi non sono visibili all'inizio, Scrollspy funzionerà con loro quando entreranno in vista. È come avere una spia che può vedere attraverso i muri!

Uso

Per usare Scrollspy, devi fare tre cose:

Aggiungi data-bs-spy="scroll" all'elemento che vuoi spiare (solitamente il <body>).
Aggiungi data-bs-target="#navId" per specificare la navigazione da usare per scrollspy.
Aggiungi data-bs-offset="" per specificare i pixel di offset dal top quando calcoli la posizione di scorrimento.

Ecco una tabella di tutti gli attributi dati che puoi usare:

Attributo	Descrizione
data-bs-spy	Attiva scrollspy
data-bs-target	Specifica quale barra di navigazione usare per scrollspy
data-bs-offset	Pixels di offset dal top quando calcola la posizione di scorrimento
data-bs-method	Trova quale sezione l'elemento spionato si trova in

Opzioni

Puoi anche inizializzare Scrollspy con JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})

Ecco una tabella di tutte le opzioni che puoi usare:

Opzione	Tipo	Predefinito	Descrizione
offset	number	10	Pixels di offset dal top quando calcola la posizione di scorrimento
method	string	'auto'	Trova quale sezione l'elemento spionato si trova in
target	string	''	Specifica quale barra di navigazione usare per scrollspy

Proprietà CSS

Scrollspy usa alcune proprietà CSS per fare il suo lavoro:

.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}

Le proprietà position: relative e overflow: auto sono cruciali per il corretto funzionamento di Scrollspy.

Ecco tutto! Ora sei equipaggiato con le conoscenze per usare la funzionalità Scrollspy di Bootstrap. Ricorda, la pratica fa la perfezione, quindi non aver paura di sperimentare con questi esempi. Buon coding, e che la tua navigazione sia sempre fluida!

Credits: Image by storyset

Tutorial precedente:

Bootstrap - Barra di avanzamento

Prossimo tutorial:

Bootstrap - Spinner