scroll

The scroll event is fired when the document view or an element has been scrolled.

General info

Specification

DOM L3, CSSOM View

Interface

UIEvent

Bubbles

Not on elements, but bubbles to the default view when fired on the document

Cancelable

No

Target

defaultView, Document, Element

Default Action

None

Properties

Example

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 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.

Scroll optimization with window.requestAnimationFrame

// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
  // do something with the scroll position
}

window.addEventListener('scroll', function(e) {

  last_known_scroll_position = window.scrollY;

  if (!ticking) {

    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
     
    ticking = true;

  }
  
});

More similar examples on resize event.

Browser compatibility

iOS UIWebView

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.