Saltar al contingut principal Saltar a la navegació de documents
in English

Scrollspy

Actualitzeu automàticament la navegació Bootstrap o els components del grup de llista en funció de la posició de desplaçament per indicar quin enllaç està actiu actualment a la finestra gràfica.

En aquesta pàgina

Com funciona

Scrollspy té uns quants requisits per funcionar correctament:

  • S'ha d'utilitzar en un component de navegació Bootstrap o en un grup de llista .
  • Scrollspy requereix position: relative;l'element que estàs espiant, normalment el fitxer <body>.
  • Les àncores ( <a>) són necessàries i han d'apuntar a un element amb això id.

Quan s'ha implementat correctament, el vostre grup de navegació o llista s'actualitzarà en conseqüència, movent la .activeclasse d'un element a un altre en funció dels seus objectius associats.

Contenidors desplaçables i accés per teclat

Si feu un contenidor que es pot desplaçar (que no sigui <body>), assegureu-vos de tenir-ne un heightconjunt i overflow-y: scroll;aplicar-hi, juntament amb un tabindex="0"per garantir l'accés al teclat.

Exemple a la barra de navegació

Desplaceu-vos per l'àrea de sota de la barra de navegació i observeu el canvi de classe activa. També es destacaran els elements desplegables.

Primer títol

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Segon títol

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Tercer títol

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Quart títol

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Cinquè títol

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

<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>

Exemple amb navegació imbricada

Scrollspy també funciona amb .navs imbricats. Si un imbricat .navés .active, els seus pares també ho seran .active. Desplaceu-vos per l'àrea al costat de la barra de navegació i observeu el canvi de classe activa.

Element 1

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Tema 1-1

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Tema 1-2

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Tema 2

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Tema 3

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Tema 3-1

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Tema 3-2

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

<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>

Exemple amb llista-grup

Scrollspy també funciona amb .list-groups. Desplaceu-vos per l'àrea al costat del grup de llista i observeu el canvi de classe activa.

Element 1

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Tema 2

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Tema 3

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

Tema 4

Aquest és un contingut de marcador de posició per a la pàgina scrollspy. Tingueu en compte que a mesura que us desplaceu per la pàgina, es ressalta l'enllaç de navegació adequat. Es repeteix al llarg de l'exemple del component. Continuem afegint una còpia d'exemple més aquí per emfatitzar el desplaçament i el ressaltat.

<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>

Ús

Mitjançant atributs de dades

Per afegir fàcilment un comportament scrollspy a la vostra navegació de la barra superior, afegiu data-bs-spy="scroll"-lo a l'element que voleu espiar (normalment seria el <body>). A continuació, afegiu l' data-bs-targetatribut amb l'ID o la classe de l'element pare de qualsevol .navcomponent 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>

Mitjançant JavaScript

Després d'afegir position: relative;el vostre CSS, truqueu al scrollspy mitjançant JavaScript:

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

Es requereixen objectius d'identificació resolubles

Els enllaços de la barra de navegació han de tenir objectius d'identificació resolubles. Per exemple, un <a href="#home">home</a>ha de correspondre a alguna cosa al DOM com <div id="home"></div>.

S'han ignorat els elements objectiu no visibles

Els elements de destinació que no siguin visibles s'ignoraran i els elements de navegació corresponents no es ressaltaran mai.

Mètodes

actualització

Quan utilitzeu scrollspy juntament amb l'addició o eliminació d'elements del DOM, haureu de cridar el mètode d'actualització de la següent manera:

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

disposar

Destrueix el scrollspy d'un element. (Elimina les dades emmagatzemades a l'element DOM)

getInstance

Mètode estàtic que us permet obtenir la instància scrollspy associada a un element DOM

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

getOrCreateInstance

Mètode estàtic que us permet obtenir la instància scrollspy associada a un element DOM o crear-ne un de nou en cas que no s'hagi inicialitzat

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-bs-, com a data-bs-offset="".

Nom Tipus Per defecte Descripció
offset nombre 10 Píxels a compensar des de la part superior quan es calcula la posició del desplaçament.
method corda auto Troba a quina secció es troba l'element espiat. autoEscollirà el millor mètode per obtenir les coordenades de desplaçament. offsetutilitzarà el Element.getBoundingClientRect()mètode per obtenir les coordenades de desplaçament. positionutilitzarà les propietats HTMLElement.offsetTopi HTMLElement.offsetLeftper obtenir les coordenades de desplaçament.
target cadena | Objecte jQuery | Element DOM Especifica l'element per aplicar el connector Scrollspy.

Esdeveniments

Tipus d'esdeveniment Descripció
activate.bs.scrollspy Aquest esdeveniment s'activa a l'element de desplaçament cada cop que el scrollspy activa un element nou. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})