JavaScript Element scroll Event

What You’ll Learn

The scroll event fires when an element has been scrolled. Learn addEventListener vs onscroll, scrollTop / scrollLeft, why handlers should be throttled, how it differs from wheel, and five try-it labs.

Introduction

scroll answers: “Did this element’s scroll position just change?” That covers overflow boxes, custom scroll panes, and (on document / window) the whole page.

Listen on the element that actually scrolls. Because the event does not bubble, a parent will not see a child’s scroll unless you attach the listener to that child.

Understanding scroll

An instance event that answers: “Did scroll offset change on this element?”

• Trigger — user or script scrolled the element (scrollbar, keys, touch, scrollTo, …).
• Event type — generic Event; read position from the element.
• Does not bubble — attach to the scrolling element.
• Not cancelable — you cannot stop scrolling with preventDefault() on scroll.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

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

onscroll = (event) => { };

Event type

A generic Event.

Handy element properties

⚖️ scroll vs Related Signals

⚡ Throttle High-Rate Scroll

MDN’s Element examples use setTimeout to reset a status message after scrolling pauses. For continuous UI updates, a common pattern is:

• Read scrollTop immediately in the listener.
• Schedule heavy work once per frame with requestAnimationFrame.
• Avoid layout thrashing (many reads/writes of size) inside the raw handler.

Examples Gallery

Examples follow MDN Element: scroll event. Scroll inside the small overflow boxes in each try-it lab.

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

Scroll event fired!

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

Element scroll event fired!

const box = document.getElementById("scroll-box");
const out = document.getElementById("out");

box.addEventListener("scroll", () => {
  out.textContent =
    "top=" + Math.round(box.scrollTop) +
    " left=" + Math.round(box.scrollLeft);
});

top=48 left=12

const box = document.getElementById("scroll-box");
const out = document.getElementById("out");
let latestTop = 0;
let ticking = false;

function paint() {
  out.textContent = "rAF paint top=" + Math.round(latestTop);
  ticking = false;
}

box.addEventListener("scroll", () => {
  latestTop = box.scrollTop;
  if (!ticking) {
    requestAnimationFrame(paint);
    ticking = true;
  }
});

rAF paint top=72

const box = document.getElementById("scroll-box");
const out = document.getElementById("out");

box.addEventListener("scroll", () => {
  const max = box.scrollHeight - box.clientHeight;
  const pct = max > 0 ? Math.round((box.scrollTop / max) * 100) : 0;
  out.textContent = "progress=" + pct + "%";
});

progress=42%

🚀 Common Use Cases

• Reading position for sticky headers, shadows, or “back to top” buttons.
• Scroll progress bars and reading indicators.
• Lazy-loading content near the bottom of a pane.
• Syncing custom scrollbars or mirrored panels.
• Pairing continuous scroll updates with scrollend for final cleanup.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Does not bubble—listen on the scrolling element.
• High fire rate—throttle expensive work.
• For completion, see Element scrollend.
• Related learning: pointerup, scrollend, scrollTop, scrollTo(), addEventListener(), JavaScript hub.

💡 Best Practices