Document: scroll event

The scroll event fires when the document view has been scrolled. For element scrolling, see Element: scroll event.

Bubbles Yes
Cancelable No
Interface Event
Event handler property onscroll

Note: In iOS UIWebViews, scroll events are not fired while scrolling is taking place; they are only fired after the scrolling has completed. See Bootstrap issue #16202. Safari and WKWebViews are not affected by this bug.


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. Instead, it is recommended to throttle the event using requestAnimationFrame(), setTimeout(), or a CustomEvent, as follows.

Note, however, that input events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary. This example optimizes the scroll event for requestAnimationFrame.

// Reference:

let lastKnownScrollPosition = 0;
let ticking = false;

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

document.addEventListener('scroll', function(e) {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      ticking = false;

    ticking = true;

See more, similar examples on the resize event page.


CSSOM View Module
# eventdef-document-scroll

Browser compatibility

BCD tables only load in the browser

See also