JavaScript Element scrollsnapchanging Event

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

Definition

In JavaScript, the scrollsnapchanging event fires on a scroll container during a scrolling gesture when the browser decides a new snap target is pending—the one that will be selected when the gesture ends (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 scrollsnapchanging. Start with this line.

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

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

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

Parameters

ParameterDescription
CSS scroll snapRequired. Creates snap targets
Feature detectRequired. Limited / Experimental API
SnapEventRequired. Pending 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 pending-snap UI.

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

if (!supported) {
  console.log("Skip preview highlight; wait for scrollend");
}
Try It Yourself

How It Works

  1. Check the handler property. Simple existence test for Limited APIs.
  2. Branch early. Unsupported browsers should skip preview UI.
  3. Common fallback. Update selection only after scrollend.
  4. Still set CSS snap. Visual snapping can work without this event.

Example 2 — Mark the Pending Target

MDN-style handler — clear old pending, then mark snapTargetBlock.

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

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

How It Works

  1. Listen on the container. The event fires on the scroll container (MDN).
  2. Clear old pending. Only one card should look “about to land.”
  3. Read snapTargetBlock. The pending block-axis child (or null).
  4. Style as preview. Use a distinct class from the final selected state.

Example 3 — Read a Pending Label

Log which card is pending using a data attribute.

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

if ("onscrollsnapchanging" in window) {
  box.addEventListener("scrollsnapchanging", (event) => {
    const t = event.snapTargetBlock;
    out.textContent = t
      ? "pending: " + (t.dataset.label || t.textContent)
      : "no block snap target";
  });
} else {
  out.textContent = "scrollsnapchanging 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. Expect repeats. The handler may run several times per gesture.
Compatibility

Browser Support

scrollsnapchanging is marked Experimental and Limited availability on MDN (not Baseline). Support is incomplete — feature-detect and treat pending UI as optional.

✓ Experimental · Limited availability

Element scrollsnapchanging

SnapEvent when a pending scroll snap target is determined during a gesture.

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
scrollsnapchanging Limited

Bottom line: Use progressively: enhance Chromium-class browsers with scrollsnapchanging; fall back to selected-state updates on scrollsnapchange or scrollend elsewhere.

Frequently Asked Questions

It fires on a scroll container during a scrolling gesture when the browser determines a new scroll snap target is pending—the one that will be selected when the gesture ends (MDN).
MDN marks Element scrollsnapchanging 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 pending snap targets for each axis.
Yes. It can fire multiple times as the user moves over potential snap targets. It does not fire for every crossed target—only for the last target the snap would potentially rest on (MDN).
scrollsnapchanging reports the pending target during the gesture. scrollsnapchange fires at the end when a new snap target is actually selected (just before scrollend).
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: securitypolicyviolation

Learn how CSP reports blocked resources and policy violations.

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