Element: 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 Scrollen eines Elements abgeschlossen ist. Scrollen gilt als abgeschlossen, wenn die Scrollposition keine weiteren ausstehenden Aktualisierungen hat und der Benutzer seine Geste beendet hat.

Scrollpositionsaktualisierungen umfassen sanftes oder sofortiges Scrollen mit dem Mausrad, Tastatur-Scrolling, Scroll-Snap-Ereignisse oder andere APIs und Gesten, die eine Aktualisierung der Scrollposition verursachen. Benutzer-Gesten wie Touch-Panning oder Trackpad-Scrolling sind nicht abgeschlossen, bis Zeiger oder Tasten losgelassen wurden. Wenn sich die Scrollposition nicht verändert hat, wird kein scrollend Ereignis ausgelöst.

Um zu erkennen, wann das Scrollen innerhalb eines Dokuments abgeschlossen ist, beachten Sie das scrollend Ereignis des Dokuments.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.

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

onscrollend = (event) => {};

#scroll-box {
  height: 100px;
  width: 100px;
  float: left;
  overflow: scroll;
  outline: 4px dotted;
  margin: 4px;
}

#scroll-box-title {
  position: fixed;
  top: 5px;
  left: 5px;
  transform: translateX(0);
}

#large-element {
  height: 200px;
  width: 200px;
}

#output {
  text-align: center;
}

html

<div id="scroll-box">
  <p id="scroll-box-title">Scroll me!</p>
  <p id="large-element"></p>
</div>
<p id="output">Waiting on scroll events...</p>

const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.addEventListener("scroll", (event) => {
  output.textContent = "scroll event fired, waiting for scrollend...";
});

element.addEventListener("scrollend", (event) => {
  output.textContent = "scrollend event fired!";
});

Verwendung der `onscrollend` Ereignishandler-Eigenschaft

Das folgende Beispiel zeigt, wie die onscrollend Ereignishandler-Eigenschaft verwendet wird, um zu erkennen, wann der Benutzer das Scrollen gestoppt hat:

#scroll-box {
  height: 100px;
  width: 100px;
  float: left;
  overflow: scroll;
  outline: 4px dotted;
  margin: 4px;
}

#scroll-box-title {
  position: fixed;
  top: 5px;
  left: 5px;
  transform: translateX(0);
}

#large-element {
  height: 200px;
  width: 200px;
}

#output {
  text-align: center;
}

html

<div id="scroll-box">
  <p id="scroll-box-title">Scroll me!</p>
  <p id="large-element"></p>
</div>
<p id="output">Waiting on scroll events...</p>

const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.onscroll = (event) => {
  output.textContent = "Element scroll event fired, waiting for scrollend...";
};

element.onscrollend = (event) => {
  output.textContent = "Element 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

Element: scrollend Ereignis

Limited availability

Syntax

Ereignistyp

Beispiel

Verwendung von `scrollend` mit einem Ereignislistener

Verwendung der `onscrollend` Ereignishandler-Eigenschaft

Spezifikationen

Browser-Kompatibilität

Siehe auch