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.

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

Tercer títol

Quart títol

Cinquè títol

<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

Tema 1-1

Tema 1-2

Tema 2

Tema 3

Tema 3-1

Tema 3-2

<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 Tema 2 Tema 3 Tema 4

Element 1

Tema 2

Tema 3

Tema 4

<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. `auto`Escollirà el millor mètode per obtenir les coordenades de desplaçament. `offset`utilitzarà el `Element.getBoundingClientRect()`mètode per obtenir les coordenades de desplaçament. `position`utilitzarà les propietats `HTMLElement.offsetTop`i `HTMLElement.offsetLeft`per 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...
})

Scrollspy

Com funciona

Contenidors desplaçables i accés per teclat

Exemple a la barra de navegació

Primer títol

Segon títol

Tercer títol

Quart títol

Cinquè títol

Exemple amb navegació imbricada

Element 1

Tema 1-1

Tema 1-2

Tema 2

Tema 3

Tema 3-1

Tema 3-2

Exemple amb llista-grup

Element 1

Tema 2

Tema 3

Tema 4

Ús

Mitjançant atributs de dades

Mitjançant JavaScript

Es requereixen objectius d'identificació resolubles

S'han ignorat els elements objectiu no visibles

Mètodes

actualització

disposar

getInstance

getOrCreateInstance

Opcions

Esdeveniments