Element: scrollend-Ereignis

Baseline 2025

Neu verfügbar

Seit Dezember 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das scrollend-Ereignis wird ausgelöst, wenn das Scrollen eines Elements abgeschlossen ist. Das Scrollen gilt als abgeschlossen, wenn keine Aktualisierungen der Scrollposition mehr ausstehen und die Benutzerinteraktion beendet ist.

Zu den Aktualisierungen der Scrollposition gehören sanftes oder sofortiges Scrollen mit dem Mausrad, Scrollen per Tastatur, Scroll-Snap-Ereignisse sowie andere APIs und Interaktionen, die die Scrollposition ändern. Benutzerinteraktionen wie Wischgesten auf einem Touchscreen oder das Scrollen mit einem Trackpad sind erst abgeschlossen, wenn die Zeiger nicht mehr aktiv sind oder die Tasten losgelassen wurden. Wenn sich die Scrollposition nicht geändert hat, wird kein scrollend-Ereignis ausgelöst.

Informationen dazu, wie Sie erkennen, wann das Scrollen innerhalb eines Document abgeschlossen ist, finden Sie beim scrollend-Ereignis von Document.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onscrollend = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiel

`scrollend` mit einem Event Listener verwenden

Das folgende Beispiel zeigt, wie Sie mit dem scrollend-Ereignis erkennen, wann der Benutzer aufgehört hat zu scrollen:

#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!";
});

Die Event-Handler-Eigenschaft `onscrollend` verwenden

Das folgende Beispiel zeigt, wie Sie mit der Event-Handler-Eigenschaft onscrollend erkennen, wann der Benutzer aufgehört hat zu scrollen. Beachten Sie jedoch, dass dadurch gegebenenfalls andere mit onscroll und onscrollend hinzugefügte Event Listener ersetzt werden:

#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

Spezifikation
CSSOM View Module # eventdef-document-scrollend
HTML # handler-onscrollend

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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