Dokument: scroll-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das scroll-Ereignis wird ausgelöst, wenn die Dokumentansicht gescrollt wurde. Wie Sie erkennen, wann der Scrollvorgang abgeschlossen ist, erfahren Sie unter dem scrollend-Ereignis von Document. Informationen zum Scrollen von Elementen finden Sie unter dem scroll-Ereignis von Element.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

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

onscroll = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Häufigkeit von `scroll`-Ereignissen begrenzen

Da scroll-Ereignisse sehr häufig ausgelöst werden können, sollte der Event-Handler keine rechenintensiven Operationen wie Änderungen am DOM ausführen. Wenn Sie beim schnellen Scrollen Ruckeln bemerken, sollten Sie die Ausführungshäufigkeit begrenzen.

Möglicherweise stoßen Sie auf Code, der die Ausführungshäufigkeit des scroll-Event-Handlers mithilfe von requestAnimationFrame() begrenzt. Das ist wirkungslos, da Animation-Frame-Callbacks mit derselben Häufigkeit wie scroll-Event-Handler ausgelöst werden. Stattdessen müssen Sie das Zeitintervall selbst festlegen, beispielsweise mit setTimeout().

let lastKnownScrollPosition = 0;
let ticking = false;

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

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

  if (!ticking) {
    // Throttle the event to "do something" every 20ms
    setTimeout(() => {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    }, 20);

    ticking = true;
  }
});

Alternativ können Sie IntersectionObserver verwenden, mit dem sich Ereignisse anhand von Schwellenwerten beobachten lassen.