The scroll
event fires when the document view has been scrolled. To detect when scrolling has completed, see the Document: scrollend event
. For element scrolling, see Element: scroll event
.
The scroll
event fires when the document view has been scrolled. To detect when scrolling has completed, see the Document: scrollend event
. For element scrolling, see Element: scroll event
.
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("scroll", (event) => {}); onscroll = (event) => {};
A generic Event
.
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
.
js
let lastKnownScrollPosition = 0; let ticking = false; function doSomething(scrollPos) { // Do something with the scroll position } document.addEventListener("scroll", (event) => { lastKnownScrollPosition = window.scrollY; if (!ticking) { window.requestAnimationFrame(() => { doSomething(lastKnownScrollPosition); ticking = false; }); ticking = true; } });
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
scroll_event |
1 | 12 | 6 | 9 | 11.6 | 2 | 4.4 | 18 | 6 | 12 | 1 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event