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:

* {
  margin: 10px;
}

.box-wrapper {
  width: 900px;
  border: 4px dotted;
}

.box {
  height: 100px;
  width: 100px;
  display: block;
  border: 4px dotted;
  border-radius: 10px;
}

#output {
  text-align: center;
  font-size: 1.2em;
  position: sticky;
  bottom: 0;
}

html

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

* {
  margin: 10px;
}

.box-wrapper {
  width: 900px;
  border: 4px dotted;
}

.box {
  height: 100px;
  width: 100px;
  display: block;
  border: 4px dotted;
  border-radius: 10px;
}

#output {
  text-align: center;
  font-size: 1.2em;
  position: sticky;
  bottom: 0;
}

html

<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