Scrollspy

Actualizați automat navigarea Bootstrap sau listați componentele grupului pe baza poziției de defilare pentru a indica ce link este activ în prezent în fereastra de vizualizare.

Pe aceasta pagina

Cum functioneaza

Scrollspy are câteva cerințe pentru a funcționa corect:

Trebuie utilizat pe o componentă de navigare Bootstrap sau pe un grup de liste .
Scrollspy necesită position: relative;elementul pe care îl spionați, de obicei <body>.
Ancorele ( <a>) sunt necesare și trebuie să indice un element cu acesta id.

Când este implementat cu succes, navigarea sau grupul de listă se va actualiza în consecință, mutând .activeclasa de la un articol la altul în funcție de obiectivele asociate.

Containere derulabile și acces la tastatură

Dacă creați un container care poate fi derulat (altul decât <body>), asigurați-vă că aveți un heightset și overflow-y: scroll;îl aplicați, alături de un tabindex="0"pentru a asigura accesul la tastatură.

Derulați zona de sub bara de navigare și urmăriți schimbarea clasei active. Elementele derulante vor fi, de asemenea, evidențiate.

Primul titlu

Acesta este un conținut substituent pentru pagina scrollspy. Rețineți că pe măsură ce derulați în jos în pagină, linkul de navigare corespunzător este evidențiat. Se repetă în întregul exemplu de componentă. Continuăm să adăugăm câteva exemple de copie aici pentru a sublinia derularea și evidențierea.

Al doilea titlu

Al treilea titlu

Al patrulea titlu

Al cincilea titlu

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

Exemplu cu navigare imbricată

Scrollspy funcționează și cu .navs imbricate. Dacă un imbricat .naveste .active, părinții săi vor fi și .active. Derulați zona de lângă bara de navigare și urmăriți schimbarea clasei active.

Punctul 1

Punctul 1-1

Punctul 1-2

Punctul 2

Punctul 3

Punctul 3-1

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

Exemplu cu list-group

Scrollspy funcționează și cu .list-groups. Derulați zona de lângă grupul de listă și urmăriți schimbarea clasei active.

Punctul 1 Punctul 2 Punctul 3 Punctul 4

Punctul 1

Punctul 2

Punctul 3

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

Utilizare

Prin atribute de date

Pentru a adăuga cu ușurință comportamentul scrollspy la navigarea din bara de sus, adăugați data-bs-spy="scroll"la elementul pe care doriți să îl spionați (de obicei, acesta ar fi <body>). Apoi adăugați data-bs-targetatributul cu ID-ul sau clasa elementului părinte al oricărei .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>

Prin JavaScript

După ce ați adăugat position: relative;CSS, apelați scrollspy prin JavaScript:

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

Sunt necesare ținte ID rezolvabile

Legăturile din bara de navigare trebuie să aibă ținte de ID rezolvabile. De exemplu, un <a href="#home">home</a>must corespunde cu ceva din DOM precum <div id="home"></div>.

Elemente țintă invizibile ignorate

Elementele țintă care nu sunt vizibile vor fi ignorate și elementele lor de navigare corespunzătoare nu vor fi niciodată evidențiate.

Metode

reîmprospăta

Când utilizați scrollspy împreună cu adăugarea sau eliminarea elementelor din DOM, va trebui să apelați metoda de reîmprospătare astfel:

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

dispune

Distruge scrollspy-ul unui element. (Elimină datele stocate pe elementul DOM)

getInstance

Metodă statică care vă permite să obțineți instanța scrollspy asociată cu un element DOM

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

getOrCreateInstance

Metodă statică care vă permite să obțineți instanța scrollspy asociată cu un element DOM sau să creați unul nou în cazul în care nu a fost inițializat

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-bs-, ca în data-bs-offset="".

Nume	Tip	Mod implicit	Descriere
`offset`	număr	`10`	Pixeli de decalat de sus atunci când se calculează poziția derulării.
`method`	şir	`auto`	Găsește în ce secțiune se află elementul spionat. `auto`va alege cea mai bună metodă pentru a obține coordonatele de defilare. `offset`va folosi `Element.getBoundingClientRect()`metoda pentru a obține coordonatele de defilare. `position`va folosi proprietățile `HTMLElement.offsetTop`și `HTMLElement.offsetLeft`pentru a obține coordonatele de derulare.
`target`	șir \| obiect jQuery \| element DOM		Specifică elementul pentru a aplica pluginul Scrollspy.

Evenimente

Tip de eveniment	Descriere
`activate.bs.scrollspy`	Acest eveniment se declanșează asupra elementului de scroll ori de câte ori un element nou este activat de scrollspy.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Cum functioneaza

Containere derulabile și acces la tastatură

Exemplu în bara de navigare

Primul titlu

Al doilea titlu

Al treilea titlu

Al patrulea titlu

Al cincilea titlu

Exemplu cu navigare imbricată

Punctul 1

Punctul 1-1

Punctul 1-2

Punctul 2

Punctul 3

Punctul 3-1

Punctul 3-2

Exemplu cu list-group

Punctul 1

Punctul 2

Punctul 3

Punctul 4

Utilizare

Prin atribute de date

Prin JavaScript

Sunt necesare ținte ID rezolvabile

Elemente țintă invizibile ignorate

Metode

reîmprospăta

dispune

getInstance

getOrCreateInstance

Opțiuni

Evenimente