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 sanftes oder sofortiges Scrollen mit dem Mausrad, Scrollen mit der Tastatur, Scroll-Snap-Ereignisse sowie andere APIs und Interaktionen, die eine Änderung der Scrollposition bewirken.
Benutzerinteraktionen wie das Verschieben per Touch 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, dass 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 die Event-Handler-Eigenschaft der Schnittstelle verwenden:
onscrollend = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
scrollend von Document mit einem Event Listener verwenden
Das folgende Beispiel zeigt, wie Sie mit einem Event Listener für das scrollend-Ereignis erkennen, wann der Benutzer aufgehört hat, im Dokument zu scrollen.
Im Beispiel enthält der eingebettete iframe Inhalte, die höher und breiter als der iframe selbst sind. Daher kann innerhalb des iframes 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 Event-Handler-Eigenschaft onscrollend verwenden
Das folgende Beispiel zeigt, wie Sie mit der Event-Handler-Eigenschaft onscrollend erkennen, wann der Benutzer aufgehört hat, im Dokument zu scrollen.
Im Beispiel enthält der eingebettete iframe Inhalte, die höher und breiter als der iframe selbst sind. Daher kann innerhalb des iframes in beide Richtungen gescrollt werden.
Das Beispiel baut auf dem ersten Beispiel 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 |