Ga naar hoofdinhoud Ga naar navigatie in documenten
in English

Scrollspy

Update automatisch Bootstrap-navigatie of lijstgroepcomponenten op basis van schuifpositie om aan te geven welke link momenteel actief is in de viewport.

Op deze pagina

Hoe het werkt

Scrollspy heeft een paar vereisten om goed te kunnen functioneren:

  • Het moet worden gebruikt op een Bootstrap - navigatiecomponent of lijstgroep .
  • Scrollspy vereist position: relative;op het element dat u bespioneert, meestal de <body>.
  • Ankers ( <a>) zijn verplicht en moeten verwijzen naar een element daarmee id.

Als het succesvol is geïmplementeerd, wordt uw navigatie- of lijstgroep dienovereenkomstig bijgewerkt, waarbij de .activeklas van het ene item naar het volgende wordt verplaatst op basis van de bijbehorende doelen.

Scrollbare containers en toetsenbordtoegang

Als je een schuifbare container maakt (anders dan de <body>), zorg er dan voor dat je een heightset hebt en overflow-y: scroll;erop toepast—naast een tabindex="0"om toetsenbordtoegang te garanderen.

Voorbeeld in navbar

Scroll door het gebied onder de navigatiebalk en kijk hoe de actieve klas verandert. De dropdown-items worden ook gemarkeerd.

Eerste rubriek

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Tweede rubriek

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

derde rubriek

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

vierde rubriek

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

vijfde rubriek

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

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

Voorbeeld met geneste navigatie

Scrollspy werkt ook met geneste .navs. Als een geneste .navis .active, zullen zijn ouders dat ook zijn .active. Scroll door het gebied naast de navigatiebalk en kijk hoe de actieve klas verandert.

Item 1

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Artikel 1-1

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Artikel 1-2

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Artikel 2

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Artikel 3

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Punt 3-1

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Punt 3-2

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

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

Voorbeeld met lijstgroep

Scrollspy werkt ook met .list-groups. Blader door het gebied naast de lijstgroep en kijk hoe de actieve klas verandert.

Item 1

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Artikel 2

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Artikel 3

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

Artikel 4

Dit is wat tijdelijke inhoud voor de scrollspy-pagina. Houd er rekening mee dat wanneer u door de pagina bladert, de juiste navigatielink wordt gemarkeerd. Het wordt in het hele componentvoorbeeld herhaald. We blijven hier nog wat voorbeeldkopieën toevoegen om het scrollen en markeren te benadrukken.

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

Gebruik

Via gegevensattributen

Om eenvoudig scrollspy-gedrag toe te voegen aan uw navigatie op de bovenste balk, voegt u toe data-bs-spy="scroll"aan het element dat u wilt bespioneren (meestal is dit de <body>). Voeg vervolgens het data-bs-targetkenmerk toe met de ID of klasse van het bovenliggende element van een Bootstrap- .navcomponent.

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>

Via JavaScript

Na het toevoegen position: relative;van uw CSS, roept u de scrollspy op via JavaScript:

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

Oplosbare ID-doelen vereist

Navbar-links moeten oplosbare id-doelen hebben. Een <a href="#home">home</a>moet bijvoorbeeld overeenkomen met iets in de DOM zoals <div id="home"></div>.

Niet-zichtbare doelelementen genegeerd

Doelelementen die niet zichtbaar zijn, worden genegeerd en de bijbehorende navigatie-items worden nooit gemarkeerd.

Methoden:

verversen

Wanneer u scrollspy gebruikt in combinatie met het toevoegen of verwijderen van elementen uit de DOM, moet u de vernieuwingsmethode als volgt aanroepen:

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

weggooien

Vernietigt de scrollspy van een element. (Verwijdert opgeslagen gegevens op het DOM-element)

getInstance

Statische methode waarmee u de scrollspy-instantie kunt koppelen aan een DOM-element

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

getOrCreateInstance

Statische methode waarmee u de scrollspy-instantie kunt koppelen aan een DOM-element, of een nieuwe kunt maken voor het geval deze niet is geïnitialiseerd

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

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-bs-, zoals in data-bs-offset="".

Naam Type Standaard Beschrijving
offset nummer 10 Pixels die vanaf de bovenkant moeten worden verschoven bij het berekenen van de scrollpositie.
method snaar auto Vindt in welke sectie het bespioneerde element zich bevindt. autozal de beste methode kiezen om schuifcoördinaten te krijgen. offsetzal de Element.getBoundingClientRect()methode gebruiken om schuifcoördinaten te krijgen. positionzal de HTMLElement.offsetTopen HTMLElement.offsetLefteigenschappen gebruiken om schuifcoördinaten te krijgen.
target tekenreeks | jQuery-object | DOM-element Specificeert het element om de Scrollspy-plug-in toe te passen.

Evenementen

Evenementtype Beschrijving
activate.bs.scrollspy Deze gebeurtenis wordt geactiveerd op het scroll-element wanneer een nieuw item wordt geactiveerd door de scrollspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})