Document: scroll event
The scroll
event fires when the document view has been scrolled.
To detect when scrolling has completed, see the scrollend
event of Document
.
For element scrolling, see scroll
event of Element
.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("scroll", (event) => {});
onscroll = (event) => {};
Event type
A generic Event
.
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
.
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;
}
});
Specifications
Specification |
---|
CSSOM View Module # eventdef-document-scroll |
HTML Standard # handler-onscroll |
Browser compatibility
BCD tables only load in the browser