Element: scroll event

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thescroll event fires when an element has been scrolled.To detect when scrolling has completed, see thescrollend event ofElement.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("scroll", (event) => { })onscroll = (event) => { }

The following examples show how to use thescroll event with an event listener and with theonscroll event handler property.ThesetTimeout() method is used tothrottle the event handler becausescroll events can fire at a high rate.For additional examples that userequestAnimationFrame(), see theDocumentscroll event page.

Using`scroll` with an event listener

The following example shows how to use thescroll event to detect when the user is scrolling inside an element:

html

<div>  <p>Scroll me!</p></div><p>Waiting on scroll events...</p>

css

#scroll-box {  overflow: scroll;  height: 100px;  width: 100px;  float: left;}#scroll-box p {  height: 200px;  width: 200px;}#output {  text-align: center;}

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 theonscroll event handler property to detect when the user is scrolling:

html

<div>  <p>Scroll me!</p></div><p>Waiting on scroll events...</p>

css

#scroll-box {  overflow: scroll;  height: 100px;  width: 100px;  float: left;}#scroll-box p {  height: 200px;  width: 200px;}#output {  text-align: center;}

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);};