Scrollspy

Aktualisieren Sie automatisch die Bootstrap-Navigation oder listen Sie Gruppenkomponenten basierend auf der Bildlaufposition auf, um anzuzeigen, welcher Link derzeit im Ansichtsfenster aktiv ist.

Auf dieser Seite

Wie es funktioniert

Scrollspy hat ein paar Voraussetzungen, um richtig zu funktionieren:

Es muss auf einer Bootstrap -Navigationskomponente oder Listengruppe verwendet werden .
Scrollspy benötigt position: relative;das Element, das Sie ausspionieren, normalerweise die <body>.
Anchors ( <a>) sind erforderlich und müssen damit auf ein Element zeigen id.

Bei erfolgreicher Implementierung wird Ihre Navigations- oder Listengruppe entsprechend aktualisiert und die .activeKlasse basierend auf den zugehörigen Zielen von einem Element zum nächsten verschoben.

Scrollbare Container und Tastaturzugriff

Wenn Sie einen scrollbaren Container erstellen (außer <body>), stellen Sie sicher, dass Sie einen heightSatz haben und overflow-y: scroll;darauf angewendet haben – zusammen mit einem tabindex="0", um den Zugriff über die Tastatur zu gewährleisten.

Scrollen Sie im Bereich unterhalb der Navigationsleiste und beobachten Sie, wie sich die aktive Klasse ändert. Die Dropdown-Elemente werden ebenfalls hervorgehoben.

Erste Überschrift

Dies ist ein Platzhalterinhalt für die Scrollspy-Seite. Beachten Sie, dass beim Herunterscrollen der Seite der entsprechende Navigationslink hervorgehoben wird. Es wird im gesamten Komponentenbeispiel wiederholt. Wir fügen hier immer wieder weitere Beispieltexte hinzu, um das Scrollen und Hervorheben hervorzuheben.

Zweite Überschrift

Dritte Überschrift

Vierte Überschrift

Fünfte Überschrift

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

Beispiel mit verschachtelter Navigation

Scrollspy funktioniert auch mit verschachtelten .navs. Wenn eine verschachtelt .navist .active, sind auch ihre Eltern .active. Scrollen Sie im Bereich neben der Navigationsleiste und beobachten Sie, wie sich die aktive Klasse ändert.

Gegenstand 1

Punkt 1-1

Punkt 1-2

Punkt 2

Punkt 3

Punkt 3-1

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

Beispiel mit Listengruppe

Scrollspy funktioniert auch mit .list-groups. Scrollen Sie im Bereich neben der Listengruppe und beobachten Sie, wie sich die aktive Klasse ändert.

Gegenstand 1 Punkt 2 Punkt 3 Punkt 4

Gegenstand 1

Punkt 2

Punkt 3

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

Verwendungszweck

Über Datenattribute

Um ganz einfach Scrollspy-Verhalten zu Ihrer Topbar-Navigation hinzuzufügen, fügen data-bs-spy="scroll"Sie das Element hinzu, das Sie ausspionieren möchten (normalerweise wäre dies das <body>). Fügen Sie dann das data-bs-targetAttribut mit der ID oder Klasse des übergeordneten Elements einer beliebigen Bootstrap- .navKomponente hinzu.

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>

Über JavaScript

Nachdem position: relative;Sie Ihr CSS hinzugefügt haben, rufen Sie den Scrollspy über JavaScript auf:

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

Auflösbare ID-Ziele erforderlich

Navbar-Links müssen auflösbare ID-Ziele haben. Zum Beispiel <a href="#home">home</a>muss a etwas im DOM wie entsprechen <div id="home"></div>.

Nicht sichtbare Zielelemente werden ignoriert

Nicht sichtbare Zielelemente werden ignoriert und ihre entsprechenden Navigationselemente werden nie hervorgehoben.

Methoden

Aktualisierung

Wenn Sie scrollspy in Verbindung mit dem Hinzufügen oder Entfernen von Elementen aus dem DOM verwenden, müssen Sie die Aktualisierungsmethode wie folgt aufrufen:

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

entsorgen

Zerstört den Scrollspy eines Elements. (Entfernt gespeicherte Daten auf dem DOM-Element)

bekomme Instanz

Statische Methode, mit der Sie die Scrollspy-Instanz abrufen können, die einem DOM-Element zugeordnet ist

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

getOrCreateInstance

Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Scrollspy-Instanz abrufen oder eine neue erstellen können, falls sie nicht initialisiert wurde

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

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-bs-, wie in data-bs-offset="".

Name	Typ	Standard	Beschreibung
`offset`	Nummer	`10`	Pixel, die bei der Berechnung der Bildlaufposition vom oberen Rand versetzt werden sollen.
`method`	Schnur	`auto`	Findet heraus, in welchem Abschnitt sich das ausspionierte Element befindet. `auto`wählt die beste Methode, um Scroll-Koordinaten zu erhalten. `offset`wird die `Element.getBoundingClientRect()`Methode verwenden, um Scrollkoordinaten zu erhalten. `position`wird die Eigenschaften `HTMLElement.offsetTop`und `HTMLElement.offsetLeft`verwenden, um Bildlaufkoordinaten zu erhalten.
`target`	Zeichenfolge \| jQuery-Objekt \| DOM-Element		Gibt das Element zum Anwenden des Scrollspy-Plugins an.

Veranstaltungen

Ereignistyp	Beschreibung
`activate.bs.scrollspy`	Dieses Ereignis wird auf dem Scroll-Element ausgelöst, wenn ein neues Element vom Scrollspy aktiviert wird.

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

Scrollspy

Wie es funktioniert

Scrollbare Container und Tastaturzugriff

Beispiel in der Navigationsleiste

Erste Überschrift

Zweite Überschrift

Dritte Überschrift

Vierte Überschrift

Fünfte Überschrift

Beispiel mit verschachtelter Navigation

Gegenstand 1

Punkt 1-1

Punkt 1-2

Punkt 2

Punkt 3

Punkt 3-1

Punkt 3-2

Beispiel mit Listengruppe

Gegenstand 1

Punkt 2

Punkt 3

Punkt 4

Verwendungszweck

Über Datenattribute

Über JavaScript

Auflösbare ID-Ziele erforderlich

Nicht sichtbare Zielelemente werden ignoriert

Methoden

Aktualisierung

entsorgen

bekomme Instanz

getOrCreateInstance

Optionen

Veranstaltungen