JavaScript Element scrollend Event

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

Definition

In JavaScript, the scrollend event fires when element scrolling has completed (MDN)—no more pending scroll updates and the user’s gesture is finished. It is a generic Event. Pair it with scroll for live updates vs a final stop.

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
el.addEventListener("scrollend", fn)
CallWhat it does
el.addEventListener("scrollend", fn)Primary signature.

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

Library declarations
JavaScript
el.addEventListener("scrollend", 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 — Feature Detect

Check support before relying on scrollend.

JavaScript
const supported = "onscrollend" in window;
console.log(supported);

if (!supported) {
  console.log("Fall back to a throttled scroll timer");
}
Try It Yourself

How It Works

  1. Check the handler property. Simple existence test for Newly available APIs.
  2. Branch early. Unsupported engines need a fallback strategy.
  3. Common fallback. Idle timer after the last scroll event.
  4. Don’t polyfill fakes. Approximate stop timing carefully if you must.

Example 2 — Pair scroll with scrollend

MDN-style pattern — live status while scrolling, then a stop message.

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

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

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

How It Works

  1. Listen for scroll. Updates while the offset is changing.
  2. Listen for scrollend. Fires when scrolling is considered complete (MDN).
  3. Show two states. “Waiting…” then the final stop message.
  4. Stop scrolling to see end. Release the gesture so scrollend can fire.

Example 3 — Read Final Position

Use scrollend to log the settled scrollTop.

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

if ("onscrollend" in window) {
  box.addEventListener("scrollend", () => {
    out.textContent = "final scrollTop: " + box.scrollTop;
  });
} else {
  out.textContent = "scrollend not supported";
}
Try It Yourself

How It Works

  1. Feature-detect first. Newly available APIs need a support check.
  2. Wait for end. Avoid reading “final” values on every scroll tick.
  3. Read the element. Position is on box.scrollTop, not a special event field.
  4. Run settled work here. Lazy-load, snap UI, analytics — after motion stops.
Compatibility

Browser Support

Element scrollend is Baseline Newly available on MDN (since December 2025). It works across the latest devices and browser versions, but may be missing on older ones — feature-detect and fall back when needed.

✓ Baseline · Newly available

Element scrollend

Fires when element scrolling has completed — stop signal after scroll.

New Baseline Newly available
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
scrollend Newly available

Bottom line: Safe on current evergreen browsers. Detect support; for older engines, approximate with an idle timer after the last scroll event.

Frequently Asked Questions

It fires when element scrolling has completed—no more pending scroll position updates and the user’s gesture is finished (MDN). Use it for a stop signal, not continuous updates.
No. MDN marks Element scrollend as Baseline Newly available (since December 2025). It is not Deprecated, Experimental, or Non-standard. Feature-detect on older browsers.
A generic Event. Read the final scroll position from the element via scrollTop, scrollLeft, and related properties.
No. MDN: if the scroll position did not change, scrollend does not fire.
MDN: touch panning and trackpad scrolling are not complete until pointers or keys have been released.
scroll fires whenever the offset changes (often many times). scrollend fires once scrolling has finished. Pair them: scroll for live feedback, scrollend for final work.

Next: scrollsnapchange

Learn when the scroll-snap target changes.

scrollsnapchange 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 scroll Event JavaScript Element scrollsnapchange Event