JavaScript Document scrollend Event

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

Definition

In JavaScript, the Document scrollend event fires when the document view has finished scrolling (MDN): no more pending scroll updates, and the user has completed their gesture.

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

Syntax

Listen for scrollend. Start with this line.

JavaScript
addEventListener("scrollend", …)
CallWhat it does
addEventListener("scrollend", …)Primary signature.

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

Library declarations
JavaScript
addEventListener("scrollend", …)

Parameters

ParameterDescription
ListenerRequired. addEventListener or onscrollend
Event objectOptional. Generic Event
Position changeRequired. No fire if scroll position did not change (MDN)

Return Value

Return ValueDescription
*Fires as a Document event (listener receives the Event object).

JavaScript Examples

Example 1 — scroll + scrollend (MDN)

MDN pattern: show movement, then the settled signal.

JavaScript
document.addEventListener("scroll", () => {
  console.log("Document scroll event fired!");
});

document.addEventListener("scrollend", () => {
  console.log("Document scrollend event fired!");
});
Try It Yourself

How It Works

  1. Listen for scroll — fires while the document view moves.
  2. Listen for scrollend — fires when scrolling has completed (MDN).
  3. Expect many scrolls — one settled signal at the end.
  4. Test — scroll the page, then stop (or release a touch gesture).

Example 2 — onscrollend Property (MDN)

Same idea using the event handler property.

JavaScript
document.onscroll = () => {
  console.log("Document scroll event fired!");
};

document.onscrollend = () => {
  console.log("Document scrollend event fired!");
};
Try It Yourself

How It Works

  1. Assign onscroll — one handler for movement.
  2. Assign onscrollend — one handler for settled scroll (MDN).
  3. Same events as addEventListener, different attachment style.
  4. Note: a later assignment replaces the previous on* handler.

Example 3 — Feature Detect + Fallback

Baseline 2025 is new — detect support, else debounce scroll.

JavaScript
function onSettled() {
  console.log("scrolling settled");
}

if ("onscrollend" in document) {
  document.addEventListener("scrollend", onSettled);
} else {
  let t = null;
  document.addEventListener("scroll", () => {
    clearTimeout(t);
    t = setTimeout(onSettled, 150);
  });
}
Try It Yourself

How It Works

  1. Detect with "onscrollend" in document.
  2. Supported path — listen for real scrollend.
  3. Fallback — debounce scroll with a short timeout (approximate).
  4. Why — older browsers may lack Baseline 2025 support.
Compatibility

Browser Support

Document scrollend is marked Baseline 2025 Newly available on MDN (since December 2025). Latest evergreen browsers support it; older ones may not — feature-detect.

✓ Baseline 2025 · Newly available

Document scrollend

Fires when document scrolling has settled. Feature-detect before relying on it alone.

2025 Newly available
Google Chrome Baseline 2025 path
Yes*
Microsoft Edge Baseline 2025 path
Yes*
Mozilla Firefox Baseline 2025 path
Yes*
Apple Safari Baseline 2025 path
Yes*
Opera Follow Chromium
Yes*
Internet Explorer No
No
scrollend Baseline 2025

Bottom line: Safe on current Baseline browsers. See the MDN scrollend reference.

Frequently Asked Questions

MDN: it fires when the document view has completed scrolling — no more pending scroll updates and the user has finished their gesture.
No. MDN marks Document scrollend as Baseline 2025 Newly available (since December 2025). It is not Deprecated, Experimental, or Non-standard. Feature-detect on older browsers.
scroll fires while the view moves. scrollend fires once when scrolling has settled. Prefer scrollend for idle work that should not run on every tick.
MDN: if the scroll position did not change, no scrollend fires. Touch/trackpad gestures are not complete until pointers or keys are released.
Yes. Use document.onscrollend or document.addEventListener("scrollend", …).
Use Element scrollend on that overflow element. Document scrollend is for the document view (page scroll).

Next: scrollsnapchange

Continue with the Document scrollsnapchange event.

scrollsnapchange →

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)

12 people found this page helpful

JavaScript Document scroll Event JavaScript Document scrollsnapchange Event