Document: scroll event

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

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

onscroll = (event) => { }

Event type

A generic Event.

Examples

Scroll event throttling

Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. If you notice a jank while fast scrolling, you should consider throttling the event.

Note that you may see code that throttles the scroll event handler using requestAnimationFrame(). This is useless because animation frame callbacks are fired at the same rate as scroll event handlers. Instead, you must measure the timeout yourself, such as by using 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;
  }
});

Alternatively, consider using IntersectionObserver instead, which allows threshold-based listening.

Specifications

Browser compatibility

See also

• Document: scrollend event
• Element: scroll event
• Element: scrollend event