The scroll
event fires an element has been scrolled.
Bubbles | No |
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 the scroll
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;
}
});
Note: You can find more examples on the resize
event page.
Specifications
Specification | Status |
---|---|
CSS Object Model (CSSOM) View Module | Working Draft |
Browser compatibility
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scroll event
|
Chrome
Full support Yes |
Edge
Full support ≤18 |
Firefox
Full support Yes |
IE
? |
Opera
? |
Safari
? |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support Yes |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
See also
- Document:
scroll
event
Element: scroll event by Mozilla Contributors is licensed under CC-BY-SA 2.5.