Document: scroll-Ereignis

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

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

onscroll = (event) => {};

Ein generisches Event.

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.

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;
  }
});

• Document: scrollend-Ereignis
• Element: scroll-Ereignis
• Element: scrollend-Ereignis