Dokument: scrollend-Ereignis
Baseline 2025
Neu verfügbar
Seit Dezember 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Das scrollend-Ereignis wird ausgelöst, wenn das Scrollen der Dokumentansicht abgeschlossen ist.
Das Scrollen gilt als abgeschlossen, wenn keine Aktualisierungen der Scrollposition mehr ausstehen und die Benutzerinteraktion beendet ist.
Zu den Aktualisierungen der Scrollposition gehören flüssiges oder sofortiges Scrollen mit dem Mausrad, Scrollen mit der Tastatur, Scroll-Snap-Ereignisse sowie andere APIs und Interaktionen, die die Scrollposition verändern.
Benutzerinteraktionen wie das Verschieben per Touch-Geste oder das Scrollen mit dem Trackpad sind erst abgeschlossen, wenn die Zeiger oder Tasten losgelassen wurden.
Wenn sich die Scrollposition nicht geändert hat, wird kein scrollend-Ereignis ausgelöst.
Wie Sie erkennen, wann das Scrollen innerhalb eines Elements abgeschlossen ist, erfahren Sie unter dem scrollend-Ereignis von Element.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("scrollend", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft des Interfaces zuweisen:
onscrollend = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Document scrollend mit einem Event-Listener verwenden
Das folgende Beispiel zeigt, wie Sie mit einem Event-Listener für das scrollend-Ereignis erkennen, wann der Benutzer das Scrollen im Dokument beendet hat.
Im Beispiel enthält der eingebettete iframe Inhalte, die höher und breiter als der iframe selbst sind. Daher kann innerhalb des iframe in beide Richtungen gescrollt werden.
Wenn der Benutzer aufhört zu scrollen, wird das scrollend-Ereignis ausgelöst:
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>
const output = document.querySelector("p#output");
document.addEventListener("scroll", (event) => {
output.textContent = "Document scroll event fired!";
});
document.addEventListener("scrollend", (event) => {
output.textContent = "Document scrollend event fired!";
});
Die onscrollend-Event-Handler-Eigenschaft verwenden
Das folgende Beispiel zeigt, wie Sie mit der scrollend-Event-Handler-Eigenschaft erkennen, wann der Benutzer das Scrollen im Dokument beendet hat.
Im Beispiel enthält der eingebettete iframe Inhalte, die höher und breiter als der iframe selbst sind. Daher kann innerhalb des iframe in beide Richtungen gescrollt werden.
Dieses Beispiel baut auf dem ersten auf, verwendet aber document.onscrollend anstelle eines Event-Listeners. Beachten Sie, dass dadurch gegebenenfalls andere über onscroll und onscrollend hinzugefügte Event-Listener ersetzt werden:
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>
document.onscroll = (event) => {
output.textContent = "Document scroll event fired!";
};
document.onscrollend = (event) => {
output.textContent = "Document scrollend event fired!";
};
Spezifikationen
| Spezifikation |
|---|
| CSSOM View Module # eventdef-document-scrollend |
| HTML # handler-onscrollend |