JavaScript Element scrollsnapchange Event

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

Definition

In JavaScript, the scrollsnapchange event fires on a scroll container at the end of a scrolling operation when a new scroll snap target has been selected—just before scrollend (MDN). The event type is a SnapEvent.

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

Syntax

Listen for scrollsnapchange. Start with this line.

JavaScript
el.addEventListener("scrollsnapchange", fn)
CallWhat it does
el.addEventListener("scrollsnapchange", fn)Primary signature.

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

Library declarations
JavaScript
el.addEventListener("scrollsnapchange", fn)

Parameters

ParameterDescription
CSS scroll snapRequired. Creates snap targets
Feature detectRequired. Limited / Experimental API
SnapEventRequired. Selected target element refs

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Feature Detect

Check support before building a snap-change UI.

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

if (!supported) {
  console.log("Use scrollend + nearest-child fallback");
}
Try It Yourself

How It Works

  1. Check the handler property. Simple existence test for Limited APIs.
  2. Branch early. Unsupported browsers need another strategy.
  3. Common fallback. On scrollend, find the nearest snap-aligned child.
  4. Still set CSS snap. Visual snapping can work without this event.

Example 2 — Mark the Selected Target

MDN-style handler — mark snapTargetBlock when a new target is chosen.

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

scrollingElem.addEventListener("scrollsnapchange", (event) => {
  scrollingElem.querySelectorAll(".selected")
    .forEach((el) => el.classList.remove("selected"));
  if (event.snapTargetBlock) {
    event.snapTargetBlock.classList.add("selected");
  }
});
Try It Yourself

How It Works

  1. Listen on the container. The event fires on the scroll container (MDN).
  2. Wait for gesture end. Selection happens when scrolling finishes.
  3. Read snapTargetBlock. The newly selected block-axis child (or null).
  4. Update UI. Add a class, announce the card, sync dots — after selection.

Example 3 — Read a Target Label

Log which card was selected using a data attribute.

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

if ("onscrollsnapchange" in window) {
  box.addEventListener("scrollsnapchange", (event) => {
    const t = event.snapTargetBlock;
    out.textContent = t
      ? "selected: " + (t.dataset.label || t.textContent)
      : "no block snap target";
  });
} else {
  out.textContent = "scrollsnapchange not supported";
}
Try It Yourself

How It Works

  1. Feature-detect first. Avoid attaching on unsupported engines.
  2. Read the target element. snapTargetBlock is an Element reference.
  3. Pull a label. Use data-* or text for a simple message.
  4. Handle null. Inline-only snap containers leave block target as null.
Compatibility

Browser Support

scrollsnapchange is marked Experimental and Limited availability on MDN (not Baseline). Support is incomplete — feature-detect and provide a fallback for browsers without SnapEvent.

✓ Experimental · Limited availability

Element scrollsnapchange

SnapEvent when a new scroll snap target is selected — just before scrollend.

Partial Not Baseline
Google Chrome Recent Chromium (check MDN)
Supported
Mozilla Firefox Often unavailable
Unavailable
Apple Safari Often unavailable
Unavailable
Microsoft Edge Chromium-based
Supported
Opera Chromium-based paths
Partial
Internet Explorer Not available
Unavailable
scrollsnapchange Limited

Bottom line: Use progressively: enhance Chromium-class browsers with scrollsnapchange; fall back to scrollend + measuring the nearest snap child elsewhere.

Frequently Asked Questions

It fires on a scroll container at the end of a scrolling operation when a new scroll snap target has been selected—just before the scrollend event (MDN).
MDN marks Element scrollsnapchange as Experimental and Limited availability (not Baseline). It is not Deprecated or Non-standard. Feature-detect before relying on it in production.
A SnapEvent, which inherits from Event. Use snapTargetBlock and/or snapTargetInline to read the newly selected snap targets for each axis.
When the user finishes scrolling in the container—for example after a touch gesture or after dragging the scrollbar—and releases the gesture (MDN).
scrollsnapchanging can fire during a gesture when a pending snap target changes. scrollsnapchange fires once at the end when the new snap target is actually selected.
Set scroll-snap-type on the scroll container and scroll-snap-align on child snap targets so the browser has something to snap to.

Next: scrollsnapchanging

Learn the pending snap-target event during a gesture.

scrollsnapchanging 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 scrollend Event JavaScript Element scrollsnapchanging Event