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

Scrollpositionsaktualisierungen umfassen sanftes oder sofortiges Mausradscrollen, Tastaturscrollen, Scroll-Snap-Ereignisse oder andere APIs und Gesten, die die Scrollposition aktualisieren. Benutzergesten wie Touch-Panning oder Trackpad-Scrolling 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

Verwendung 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 als das iframe selbst sind, sodass das Scrollen innerhalb des iframes in beide 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!";
});

Verwendung der `onscrollend`-Ereignishandler-Eigenschaft

Das folgende Beispiel zeigt, wie die scrollend-Ereignishandler-Eigenschaft 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 als das iframe selbst sind, sodass das Scrollen innerhalb des iframes in beide Richtungen möglich ist. Dieses Beispiel 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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden