Dokument: 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 July 2015.

Das scroll-Ereignis wird ausgelöst, wenn die Dokumentansicht gescrollt wurde. Um zu erkennen, wann das Scrollen abgeschlossen wurde, siehe das scrollend-Ereignis des Document. Für das Scrollen von Elementen, siehe scroll-Ereignis des Element.

Syntax

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

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

onscroll = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Scroll-Ereignis-Drosselung

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

Beachten Sie jedoch, dass Eingabeereignisse und Animationsrahmen ungefähr mit der gleichen Rate ausgelöst werden, wodurch die folgende Optimierung oft unnötig ist. Dieses Beispiel optimiert das scroll-Ereignis für requestAnimationFrame.

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 # handler-onscroll