跳转到主要内容

Document: scroll event

{{APIRef("CSSOM view API")}}

The scroll event fires when the document view has been scrolled. To detect when scrolling has completed, see the {{domxref("Document/scrollend_event", "scrollend")}}scrollend event of Document. For element scrolling, see {{domxref("Element/scroll_event", "scroll")}}scroll event of Element.

Syntax

Use the event name in {{domxref("EventTarget/addEventListener", "addEventListener()")}}:

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

Alternatively, assign to the event handler property of the interface:

onscroll = (event) => { }

Event type

A generic {{domxref("Event")}}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 {{glossary("jank")}}jank while fast scrolling, you should consider {{glossary("throttle", "throttling")}}throttling the event.

Note that you may see code that throttles the scroll event handler using {{domxref("Window.requestAnimationFrame()", "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 {{domxref("Window.setTimeout", "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 {{domxref("IntersectionObserver")}}IntersectionObserver instead, which allows threshold-based listening.

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also