JavaScript Element scrollsnapchange Event

What You’ll Learn

The scrollsnapchange event fires on a scroll container when scrolling ends and a new scroll snap target is selected—just before scrollend. Learn SnapEvent, snapTargetBlock / snapTargetInline, the CSS you need, and five try-it labs.

Introduction

CSS scroll snap lets a scroller “stick” to child items (carousels, full-page sections, card rails). scrollsnapchange is the JavaScript signal that says: “Scrolling finished, and this child is now the selected snap target.”

It fires on the scroll container at the end of a gesture (touch, scrollbar drag, and similar), and only when a new snap target was chosen. MDN notes it runs just before the matching scrollend event.

Understanding scrollsnapchange

An instance event that answers: “Did scrolling end on a newly selected snap target?”

• Trigger — scroll gesture finished and a new snap target was selected.
• Event type — SnapEvent with axis target properties.
• Timing — at end of scrolling, just before scrollend.
• CSS required — scroll snap on the container and children.
• Status — Experimental; Limited availability (not Baseline).

🎨 Scroll Snap Setup

Turn a box into a snap container and mark children as snap targets:

main {
  width: 250px;
  height: 450px;
  overflow: scroll;
  scroll-snap-type: block mandatory;
}

main > section {
  scroll-snap-align: start;
}

• scroll-snap-type — axis + strictness (mandatory / proximity).
• scroll-snap-align — where each child snaps (start, center, end).
• Listen for scrollsnapchange on the same element that scrolls.

📝 Syntax

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

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

onscrollsnapchange = (event) => { };

Event type

A SnapEvent (inherits from Event).

SnapEvent properties

Feature detection

if ("onscrollsnapchange" in window) {
  el.addEventListener("scrollsnapchange", onSnap);
} else {
  // Fallback: IntersectionObserver or scrollend + geometry
}

⚖️ scrollsnapchange vs Related Signals

Examples Gallery

Examples follow MDN Element: scrollsnapchange event. Use a Chromium browser for the try-it labs; scroll the snap panes until they settle.

const scrollingElem = document.querySelector("main");

scrollingElem.addEventListener("scrollsnapchange", (event) => {
  event.snapTargetBlock.classList.add("selected");
});

Selected snap child gets class "selected"

const scrollingElem = document.querySelector("main");

scrollingElem.onscrollsnapchange = (event) => {
  const target = event.snapTargetBlock;
  if (target) {
    console.log("Snapped to:", target.dataset.label);
  }
};

Snapped to: Card 2

const box = document.getElementById("snap-box");
const out = document.getElementById("out");

if ("onscrollsnapchange" in window) {
  out.textContent = "scrollsnapchange supported — scroll to snap";
  box.addEventListener("scrollsnapchange", (event) => {
    const t = event.snapTargetBlock;
    out.textContent = t
      ? "snapped: " + (t.dataset.label || t.textContent.trim())
      : "snapped (no block target)";
  });
} else {
  out.textContent = "scrollsnapchange not supported in this browser";
}

snapped: Card 3

const box = document.getElementById("snap-box");

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

Only the current snap child keeps class "selected"

const box = document.getElementById("snap-box");
const out = document.getElementById("out");
const log = [];

function push(msg) {
  log.push(msg);
  out.textContent = log.slice(-6).join("\n");
}

box.addEventListener("scrollsnapchange", () => {
  push("1) scrollsnapchange");
});

box.addEventListener("scrollend", () => {
  push("2) scrollend");
});

1) scrollsnapchange
2) scrollend

🚀 Common Use Cases

• Highlight the active carousel / story card after snap settles.
• Update page dots or a progress label to match the snapped section.
• Lazy-load or prefetch content for the newly selected slide.
• Announce the active item for accessibility after snap.
• Run analytics only when the user lands on a new snap target.

🔧 How It Works

📝 Notes

• MDN: Experimental + Limited availability — Experimental banner shown; not Deprecated / Non-standard.
• Requires CSS scroll snap on the scrolling element and its children.
• Fires only when a new snap target is selected at scroll end.
• Chromium 129+ today; feature-detect for Firefox / Safari.
• Related learning: scrollend, scroll, addEventListener(), JavaScript hub.

💡 Best Practices