Document: scrollend Ereignis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das scrollend
Ereignis wird ausgelöst, wenn die Ansicht des Dokuments das Scrollen abgeschlossen hat. Das Scrollen gilt als abgeschlossen, wenn die Scroll-Position keine weiteren ausstehenden Updates mehr hat und der Benutzer seine Geste beendet hat.
Updates der Scroll-Position umfassen sanftes oder sofortiges Scrollen mit dem Mausrad, Scrollen mit der Tastatur, Scroll-Snap-Ereignisse oder andere APIs und Gesten, die dazu führen, dass sich die Scroll-Position aktualisiert. Benutzer-Gesten wie das Berühren des Bildschirms oder das Scrollen mit dem Trackpad sind erst abgeschlossen, wenn Zeiger oder Tasten losgelassen wurden. Wenn sich die Scroll-Position nicht geändert hat, wird kein scrollend
Ereignis ausgelöst.
Um zu erkennen, wann das Scrollen innerhalb eines Elements abgeschlossen ist, siehe das scrollend
Ereignis von Element
.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("scrollend", (event) => {});
onscrollend = (event) => {};
Ereignistyp
Ein generisches Event
.
Beispiele
Verwendung von Document scrollend
mit einem Event Listener
Das folgende Beispiel zeigt, wie das scrollend
Ereignis mit einem Event Listener verwendet wird, um festzustellen, wann der Benutzer das Scrollen des Dokuments beendet hat. Im Beispiel gibt es Inhalte im eingebetteten <iframe>
, die höher und breiter als das <iframe>
selbst sind, sodass das Scrollen innerhalb des <iframe>
in beide Richtungen möglich ist. Wenn der Benutzer das Scrollen stoppt, 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!";
});
Verwendung der onscrollend
Ereignis-Handler-Eigenschaft
Das folgende Beispiel zeigt, wie die scrollend
Ereignis-Handler-Eigenschaft verwendet wird, um festzustellen, wann der Benutzer das Scrollen des Dokuments beendet hat. Im Beispiel gibt es Inhalte im eingebetteten <iframe>
, die höher und breiter als das <iframe>
selbst sind, sodass das Scrollen innerhalb des <iframe>
in beide Richtungen möglich ist. Dies baut auf dem ersten Beispiel auf, verwendet jedoch document.onscrollend
anstelle eines Event Listeners:
<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
Specification |
---|
CSSOM View Module # eventdef-document-scrollend |
HTML Standard # handler-onscrollend |
Browser-Kompatibilität
BCD tables only load in the browser