JavaScript Element scrollend Event

What You’ll Learn

The scrollend event fires when element scrolling has completed. Learn addEventListener vs onscrollend, how it pairs with scroll, when it does not fire, feature detection for older browsers, and five try-it labs.

Introduction

scrollend answers: “Has scrolling on this element fully stopped?” Scrolling is complete when there are no more pending scroll position updates and the user has finished their gesture.

That includes wheel scrolling, keyboard scrolling, scroll-snap, and APIs that change scroll position. Touch panning and trackpad scrolling are not complete until pointers or keys are released. If the scroll position never changed, scrollend does not fire.

Understanding scrollend

An instance event that answers: “Did scrolling finish on this element?”

• Trigger — scroll completed (gesture done, no pending position updates).
• Event type — generic Event; read final position from the element.
• Does not bubble — attach to the scrolling element.
• No fire if unchanged — if offset did not move, no scrollend.
• Baseline Newly available on MDN (since December 2025).

📝 Syntax

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

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

onscrollend = (event) => { };

Event type

A generic Event.

Feature detection

if ("onscrollend" in window) {
  el.addEventListener("scrollend", onDone);
} else {
  // Fallback: debounce scroll with setTimeout
}

⚖️ scrollend vs Related Signals

⚡ When scrollend Fires

• After smooth or instant wheel / keyboard / snap / API scroll settles.
• After touch or trackpad gestures release (pointers / keys up).
• Not if the scroll position did not change.
• Listen on the element that scrolls; for the page, see Document scrollend.

Examples Gallery

Examples follow MDN Element: scrollend event. Scroll inside the overflow boxes in each try-it lab, then stop to see scrollend.

const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.addEventListener("scroll", (event) => {
  output.textContent = "scroll event fired, waiting for scrollend...";
});

element.addEventListener("scrollend", (event) => {
  output.textContent = "scrollend event fired!";
});

scrollend event fired!

const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.onscroll = (event) => {
  output.textContent = "Element scroll event fired, waiting for scrollend...";
};

element.onscrollend = (event) => {
  output.textContent = "Element scrollend event fired!";
};

Element scrollend event fired!

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

function onDone() {
  out.textContent = "done · top=" + Math.round(box.scrollTop);
}

if ("onscrollend" in window) {
  out.textContent = "native scrollend supported";
  box.addEventListener("scrollend", onDone);
} else {
  out.textContent = "fallback: debounce scroll";
  box.addEventListener("scroll", () => {
    clearTimeout(timer);
    timer = setTimeout(onDone, 150);
  });
}

done · top=64

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

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

final top=48 left=12

const box = document.getElementById("scroll-box");
const out = document.getElementById("out");
let scrolls = 0;
let ends = 0;

box.addEventListener("scroll", () => {
  scrolls += 1;
  out.textContent = "scroll=" + scrolls + " · scrollend=" + ends;
});

box.addEventListener("scrollend", () => {
  ends += 1;
  out.textContent = "scroll=" + scrolls + " · scrollend=" + ends;
});

scroll=27 · scrollend=1

🚀 Common Use Cases

• Run cleanup or analytics only when the user stops scrolling.
• Save the final scrollTop / scrollLeft for restore later.
• Snap custom UI or lazy-load after motion settles.
• Replace brittle “debounce scroll” hacks when native support exists.
• Pair continuous scroll feedback with a final scrollend action.

🔧 How It Works

📝 Notes

• MDN: Baseline Newly available (since December 2025) — no Deprecated / Experimental / Non-standard banner.
• Does not bubble—listen on the scrolling element.
• Does not fire if scroll position did not change.
• Touch / trackpad: wait until pointers or keys are released.
• Related learning: scroll, scrollTop, scrollTo(), addEventListener(), JavaScript hub.

💡 Best Practices