Dokument: 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 das Dokumentansicht das Scrollen abgeschlossen hat. Das Scrollen gilt als abgeschlossen, wenn die Scrollposition keine weiteren ausstehenden Aktualisierungen mehr hat und der Benutzer seine Geste abgeschlossen hat.

Scrollpositionsaktualisierungen 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 die Scrollposition aktualisiert wird. Benutzergesten wie das Streichen mit Berührung oder Scrollen mit dem Trackpad sind erst abgeschlossen, wenn Zeiger oder Tasten losgelassen wurden. Wenn sich die Scrollposition 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 Ereignishandler-Eigenschaft.

addEventListener("scrollend", (event) => { })

onscrollend = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Verwenden von Document `scrollend` mit einem Ereignis-Listener

Das folgende Beispiel zeigt, wie das scrollend-Ereignis mit einem Ereignis-Listener verwendet wird, um zu erkennen, wann der Benutzer das Scrollen des Dokuments beendet hat. Im Beispiel gibt es Inhalte im eingebetteten iframe, die höher und breiter sind als das iframe selbst, sodass das Scrollen innerhalb des iframes in beiden Richtungen möglich ist. Wenn der Benutzer das Scrollen beendet, 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!";
});

Verwenden der `onscrollend`-Ereignishandlereigenschaft

Das folgende Beispiel zeigt, wie die scrollend-Ereignishandlereigenschaft verwendet wird, um zu erkennen, wann der Benutzer das Scrollen des Dokuments beendet hat. Im Beispiel gibt es Inhalte im eingebetteten iframe, die höher und breiter sind als das iframe selbst, sodass das Scrollen innerhalb des iframes in beiden Richtungen möglich ist. Dies baut auf dem ersten Beispiel auf, verwendet jedoch document.onscrollend anstelle eines Ereignis-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 # handler-onscrollend