Salta al contenuto principale Passa alla navigazione dei documenti
in English

Spia pergamena

Aggiorna automaticamente la navigazione Bootstrap o elenca i componenti del gruppo in base alla posizione di scorrimento per indicare quale collegamento è attualmente attivo nella finestra.

Su questa pagina

Come funziona

Scrollspy ha alcuni requisiti per funzionare correttamente:

  • Deve essere utilizzato su un componente di navigazione Bootstrap o su un gruppo di elenchi .
  • Scrollspy richiede position: relative;l'elemento che stai spiando, di solito il <body>.
  • Gli ancoraggi( <a>) sono obbligatori e devono puntare a un elemento con quello id.

Se implementato correttamente, il tuo gruppo di navigazione o elenco si aggiornerà di conseguenza, spostando la .activeclasse da un elemento all'altro in base ai target associati.

Contenitori scorrevoli e accesso da tastiera

Se stai creando un contenitore scorrevole (diverso da <body>), assicurati di avere un heightset e overflow-y: scroll;applicato ad esso, insieme a tabindex="0"per garantire l'accesso alla tastiera.

Esempio nella barra di navigazione

Scorri l'area sotto la barra di navigazione e osserva il cambio di classe attivo. Anche gli elementi a discesa verranno evidenziati.

Prima intestazione

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Secondo titolo

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Terzo titolo

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Quarto titolo

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Quinto titolo

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e 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>

Esempio con nav nidificato

Scrollspy funziona anche con nidificati .navs. Se un nidificato .navlo è .active, lo saranno anche i suoi genitori .active. Scorri l'area accanto alla barra di navigazione e osserva il cambio di classe attivo.

Articolo 1

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Voce 1-1

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Voce 1-2

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Articolo 2

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Voce 3

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Articolo 3-1

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Voce 3-2

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e 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>

Esempio con list-group

Scrollspy funziona anche con .list-groups. Scorri l'area accanto al gruppo dell'elenco e osserva il cambio di classe attiva.

Articolo 1

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Articolo 2

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Voce 3

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e l'evidenziazione.

Articolo 4

Questo è un contenuto segnaposto per la pagina scrollspy. Tieni presente che mentre scorri la pagina verso il basso, viene evidenziato il collegamento di navigazione appropriato. Viene ripetuto in tutto l'esempio del componente. Continuiamo ad aggiungere un altro esempio di copia qui per enfatizzare lo scorrimento e 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>

Utilizzo

Tramite attributi di dati

Per aggiungere facilmente il comportamento scrollspy alla tua navigazione nella barra in alto, aggiungi data-bs-spy="scroll"l'elemento che vuoi spiare (di solito questo sarebbe il <body>). Quindi aggiungi l' data-bs-targetattributo con l'ID o la classe dell'elemento padre di qualsiasi .navcomponente 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>

Tramite JavaScript

Dopo aver aggiunto position: relative;il tuo CSS, chiama scrollspy tramite JavaScript:

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

Target ID risolvibili obbligatori

I collegamenti Navbar devono avere destinazioni ID risolvibili. Ad esempio, un <a href="#home">home</a>must corrisponde a qualcosa nel DOM come <div id="home"></div>.

Elementi target non visibili ignorati

Gli elementi di destinazione che non sono visibili verranno ignorati e gli elementi di navigazione corrispondenti non verranno mai evidenziati.

Metodi

ricaricare

Quando usi scrollspy insieme all'aggiunta o alla rimozione di elementi dal DOM, dovrai chiamare il metodo di aggiornamento in questo modo:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

smaltire

Distrugge lo scrollspy di un elemento. (Rimuove i dati memorizzati sull'elemento DOM)

getInstance

Metodo statico che ti consente di ottenere l'istanza scrollspy associata a un elemento DOM

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Metodo statico che ti consente di ottenere l'istanza scrollspy associata a un elemento DOM o di crearne una nuova nel caso non sia stata inizializzata

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-bs-, come in data-bs-offset="".

Nome Tipo Predefinito Descrizione
offset numero 10 Pixel da compensare dall'alto durante il calcolo della posizione di scorrimento.
method corda auto Trova in quale sezione si trova l'elemento spiato. autosceglierà il metodo migliore per ottenere le coordinate di scorrimento. offsetutilizzerà il Element.getBoundingClientRect()metodo per ottenere le coordinate di scorrimento. positionutilizzerà le proprietà HTMLElement.offsetTope HTMLElement.offsetLeftper ottenere le coordinate di scorrimento.
target stringa | oggetto jQuery | elemento DOM Specifica l'elemento per applicare il plug-in Scrollspy.

Eventi

Tipo di evento Descrizione
activate.bs.scrollspy Questo evento si attiva sull'elemento scroll ogni volta che un nuovo elemento viene attivato da scrollspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})