Element: scroll event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
The scroll
event fires when an element has been scrolled.
To detect when scrolling has completed, see the scrollend
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
The following examples show how to use the scroll
event with an event listener and with the onscroll
event handler property.
The setTimeout()
method is used to throttle the event handler because scroll
events can fire at a high rate.
For additional examples that use requestAnimationFrame()
, see the Document
scroll
event page.
Using scroll
with an event listener
The following example shows how to use the scroll
event to detect when the user is scrolling inside an element:
<div
id="scroll-box"
style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" id="output">Waiting on scroll events...</p>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.addEventListener("scroll", (event) => {
output.textContent = "Scroll event fired!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
});
Using onscroll
event handler property
The following example shows how to use the onscroll
event handler property to detect when the user is scrolling:
<div
id="scroll-box"
style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">Waiting on scroll events...</p>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.onscroll = (event) => {
output.textContent = "Element scroll event fired!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
};
Specifications
Specification |
---|
CSSOM View Module # eventdef-document-scroll |
HTML Standard # handler-onscroll |