JavaScript Element scroll Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word SCROLL

Definition

In JavaScript, the scroll event fires when an element has been scrolled (MDN). It is a generic Event. Read position from the element with scrollTop / scrollLeft. To detect when scrolling finished, see scrollend.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for scroll. Start with this line.

JavaScript
el.addEventListener("scroll", fn)
CallWhat it does
el.addEventListener("scroll", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("scroll", …) — no import required.

Library declarations
JavaScript
el.addEventListener("scroll", fn)

Parameters

ParameterDescription
Scrolling elementRequired. Target of the listener
EventRequired. Generic event object

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Listen for scroll

MDN-style listener — note when the element scrolls.

JavaScript
const element = document.getElementById("box");
const output = document.getElementById("out");

element.addEventListener("scroll", (event) => {
  output.textContent = "Scroll event fired!";
});
Try It Yourself

How It Works

  1. Target the scroller. Listen on the element that actually scrolls.
  2. Add the listener. Use addEventListener or onscroll.
  3. Scroll inside it. Each change can fire the event.
  4. No bubbling. A parent will not see this child’s scroll.

Example 2 — Read scrollTop

Show the current vertical scroll position while scrolling.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");

box.addEventListener("scroll", () => {
  out.textContent =
    "scrollTop: " + box.scrollTop +
    ", scrollLeft: " + box.scrollLeft;
});
Try It Yourself

How It Works

  1. Listen for scroll. The event itself is a generic Event.
  2. Read the element. Position is on box, not on a special event field.
  3. Use scrollTop. Vertical offset in pixels.
  4. Use scrollLeft. Horizontal offset when content can scroll sideways.

Example 3 — Throttle Updates

MDN-style idea — avoid running heavy work on every scroll tick.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
let timer = null;

box.addEventListener("scroll", () => {
  out.textContent = "scrolling…";
  if (timer) return;
  timer = setTimeout(() => {
    out.textContent = "scrollTop: " + box.scrollTop;
    timer = null;
  }, 100);
});
Try It Yourself

How It Works

  1. Expect many events. Scroll can fire at a high rate (MDN).
  2. Gate heavy work. Skip scheduling if a timer is already pending.
  3. Update after a short delay. setTimeout batches rapid scrolls.
  4. Keep light feedback optional. A tiny “scrolling…” label can still update immediately.
Compatibility

Browser Support

Element scroll is Baseline Widely available on MDN (since July 2015). It is a standard event across modern browsers.

✓ Baseline · Widely available

Element scroll

Fires when an element has been scrolled — read scrollTop / scrollLeft on the element.

98% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
scroll Excellent

Bottom line: Safe for production. Listen on the scrolling element, keep handlers light, and use scrollend when you need the settled end.

Frequently Asked Questions

It fires when an element has been scrolled (MDN). Read the position from the element with scrollTop and scrollLeft. Listen on the element that actually scrolls.
No. MDN marks Element scroll as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A generic Event. There is no special ScrollEvent type here — use the target element’s scroll properties.
No. Element scroll does not bubble, so a parent listener will not see a child’s scroll. Attach the listener to the scrolling element itself.
Scroll can fire at a very high rate. MDN’s examples use setTimeout (or requestAnimationFrame on Document scroll) so expensive work does not run on every single event.
MDN points to the Element scrollend event for detecting when scrolling has completed. Use scroll for continuous updates and scrollend for the final stop.

Next: scrollend

Learn when element scrolling has completed.

scrollend tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element pointerup Event JavaScript Element scrollend Event