Element: scroll Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Das scroll Ereignis wird ausgelöst, wenn ein Element gescrollt wurde. Um zu erkennen, wann das Scrollen abgeschlossen ist, siehe das scrollend Ereignis von Element.

Syntax

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

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

onscroll = (event) => {};

Die folgenden Beispiele zeigen, wie das scroll Ereignis mit einem Ereignislisten und mit der onscroll Ereignishandler-Eigenschaft verwendet werden kann. Die Methode setTimeout() wird verwendet, um den Ereignishandler zu drosseln, da scroll Ereignisse mit hoher Frequenz ausgelöst werden können. Für zusätzliche Beispiele, die requestAnimationFrame() verwenden, siehe die Document scroll Ereignisseite.

Verwendung von `scroll` mit einem Ereignislisten

Das folgende Beispiel zeigt, wie das scroll Ereignis verwendet wird, um zu erkennen, wann der Benutzer innerhalb eines Elements scrollt:

html

<div
  id="scroll-box"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" 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!";
  setTimeout(() => {
    output.textContent = "Waiting on scroll events...";
  }, 1000);
});

Verwendung der `onscroll` Ereignishandler-Eigenschaft

Das folgende Beispiel zeigt, wie die onscroll Ereignishandler-Eigenschaft verwendet wird, um zu erkennen, wann der Benutzer scrollt:

html

<div
  id="scroll-box"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">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!";
  setTimeout(() => {
    output.textContent = "Waiting on scroll events...";
  }, 1000);
};

Spezifikationen

Specification
CSSOM View Module # eventdef-document-scroll
HTML Standard # handler-onscroll

Browser-Kompatibilität

BCD tables only load in the browser