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

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not
cancelable Read only Boolean Whether the event is cancellable or not?
view Read only WindowProxy document.defaultView (window of the document)
detail Read only long (float) 0.

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:

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.

Document Tags and Contributors

 Contributors to this page: danburzo, poacher2k, cvrebert, pantherCZ, teoli, Sheppy, ethertank, louisremi
 Last updated by: danburzo,