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.
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 zeigenid
.
Bei erfolgreicher Implementierung wird Ihre Navigations- oder Listengruppe entsprechend aktualisiert und die .active
Klasse 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 height
Satz haben und overflow-y: scroll;
darauf angewendet haben – zusammen mit einem tabindex="0"
, um den Zugriff über die Tastatur zu gewährleisten.
Beispiel in der Navigationsleiste
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
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.
Dritte Ü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.
Vierte Ü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.
Fünfte Ü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.
<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 .nav
s. Wenn eine verschachtelt .nav
ist .active
, sind auch ihre Eltern .active
. Scrollen Sie im Bereich neben der Navigationsleiste und beobachten Sie, wie sich die aktive Klasse ändert.
Gegenstand 1
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.
Punkt 1-1
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.
Punkt 1-2
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.
Punkt 2
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.
Punkt 3
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.
Punkt 3-1
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.
Punkt 3-2
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.
<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-group
s. Scrollen Sie im Bereich neben der Listengruppe und beobachten Sie, wie sich die aktive Klasse ändert.
Gegenstand 1
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.
Punkt 2
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.
Punkt 3
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.
Punkt 4
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.
<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-target
Attribut mit der ID oder Klasse des übergeordneten Elements einer beliebigen Bootstrap- .nav
Komponente 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...
})