Document: 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 die Dokumentansicht gescrollt wurde. Um zu erkennen, wann das Scrollen abgeschlossen ist, siehe das scrollend-Ereignis von Document. Für das Scrollen von Elementen siehe das scroll-Ereignis von Element.

Syntax

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

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

onscroll = (event) => {};

Ereignistyp

Ein generisches Event.

Beispiele

Scroll-Ereignis-Throttling

Da scroll-Ereignisse mit hoher Frequenz ausgelöst werden können, sollte der Ereignishandler keine rechenintensiven Operationen wie DOM-Änderungen ausführen. Stattdessen wird empfohlen, das Ereignis mithilfe von requestAnimationFrame(), setTimeout() oder einem CustomEvent zu drosseln, wie folgt.

Beachten Sie jedoch, dass Eingabeereignisse und Animationsframes mit etwa der gleichen Geschwindigkeit ausgelöst werden, daher ist die untenstehende Optimierung oft nicht erforderlich. Dieses Beispiel optimiert das scroll-Ereignis für requestAnimationFrame.

js
let lastKnownScrollPosition = 0;
let ticking = false;

function doSomething(scrollPos) {
  // Do something with the scroll position
}

document.addEventListener("scroll", (event) => {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(() => {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch