JavaScript Document scrollend Event

What You’ll Learn

The Document scrollend event fires when the document view has finished scrolling. Learn how it differs from scroll, when gestures count as complete, how to use onscrollend, and five try-it labs.

Introduction

scroll is noisy—it fires many times while the page moves. scrollend answers a different question: has scrolling completed?

Per MDN, scrolling is complete when there are no more pending scroll-position updates and the user has finished their gesture. That is the right moment for snap follow-up, lazy cleanup, or analytics that should not run on every pixel of movement.

Understanding Document scrollend

A Document event that answers: “Did the document view finish scrolling?”

• Fires when the document view has completed scrolling (MDN).
• Complete means no pending scroll updates + gesture finished.
• Includes wheel, keyboard, scroll-snap, APIs, and other gestures that update scroll position.
• Event type — a generic Event.
• Handler — document.onscrollend or addEventListener("scrollend", ...).
• Status — Baseline 2025 Newly available (since December 2025 on MDN).

📝 Syntax

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

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

onscrollend = (event) => { };

Event type

A generic Event.

MDN-style pairing with scroll

const output = document.querySelector("#output");

document.addEventListener("scroll", () => {
  output.textContent = "Document scroll event fired!";
});

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

⚡ When Is Scrolling “Complete”?

• Pending updates done — smooth or instant wheel/keyboard/snap/API scroll finished updating position.
• Gesture finished — touch/trackpad fingers or keys released (MDN).
• No movement — if position did not change, no scrollend.
• Element overflow — use Element scrollend, not Document.

⚖️ scrollend vs scroll

Examples Gallery

Examples follow MDN Document: scrollend event. Labs use tall pages—scroll, then stop, to see scrollend. Feature-detect on older browsers.

const output = document.querySelector("#output");

document.addEventListener("scroll", () => {
  output.textContent = "Document scroll event fired!";
});

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

Document scrollend event fired!

const output = document.querySelector("#output");

document.onscroll = () => {
  output.textContent = "Document scroll event fired!";
};

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

Document scrollend event fired!

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

function onSettled() {
  out.textContent = "Scrolling settled @ Y=" + Math.round(window.scrollY);
}

if ("onscrollend" in document) {
  out.textContent = "scrollend supported — scroll then stop";
  document.addEventListener("scrollend", onSettled);
} else {
  out.textContent = "No scrollend — using scroll idle fallback";
  let t;
  document.addEventListener("scroll", () => {
    clearTimeout(t);
    t = setTimeout(onSettled, 150);
  }, { passive: true });
}

Scrolling settled @ Y=420

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

document.addEventListener("scrollend", () => {
  out.textContent =
    "Final position: Y=" + Math.round(window.scrollY) +
    " X=" + Math.round(window.scrollX);
});

Final position: Y=640 X=0

const badge = document.getElementById("badge");

document.addEventListener("scroll", () => {
  badge.textContent = "scrolling…";
  badge.dataset.state = "busy";
}, { passive: true });

document.addEventListener("scrollend", () => {
  badge.textContent = "idle";
  badge.dataset.state = "idle";
});

While moving → "scrolling…"
After settle → "idle"

🚀 Common Use Cases

• Running cleanup or analytics only after the user stops scrolling.
• Updating UI after scroll-snap settles.
• Recording the final scrollY for “resume reading” features.
• Pausing expensive effects while scroll is busy, restarting on scrollend.
• Teaching the difference between continuous and settled scroll events.

🔧 How It Works

📝 Notes

• MDN: Baseline 2025 Newly available (since December 2025)—no Deprecated / Experimental / Non-standard banner.
• Feature-detect for older browsers; offer a scroll-idle fallback if needed.
• No event if scroll position did not change (MDN).
• Element overflow uses Element scrollend.
• Related learning: scroll, scrollingElement, JavaScript hub.

💡 Best Practices