The scroll
event fires when the document view or an element has been scrolled.
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.
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. 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 thescroll
event for requestAnimationFrame
.
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let 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; } });
See more, similar examples on the resize
event page.
Specifications
Specification | Status |
---|---|
CSS Object Model (CSSOM) View Module | Working Draft |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scroll event | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 6 | IE Full support 9 | Opera Full support 11.6 | Safari Full support 2 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 12 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support