JavaScript Element scrollsnapchanging Event

What You’ll Learn

The scrollsnapchanging event fires on a scroll container when a pending snap target changes during a gesture. Learn SnapEvent, how it differs from scrollsnapchange, CSS scroll snap setup, and five try-it labs.

Introduction

While the user is still scrolling a snap container, the browser may decide which child would become the snap target if the gesture ended now. That child is the pending snap target. scrollsnapchanging reports it.

It fires during the gesture (touch drag, scrollbar drag, and similar), and can fire multiple times as the pending target changes. MDN notes it does not fire for every snap child you pass—only for the last target the snap would potentially rest on.

Understanding scrollsnapchanging

An instance event that answers: “Which snap target is currently pending during this gesture?”

• Trigger — pending snap target changes while scrolling.
• Event type — SnapEvent with axis target properties.
• Timing — during the gesture (can fire multiple times).
• Not every child — only the potential rest target, not each crossed one.
• Status — Experimental; Limited availability (not Baseline).

🎨 Scroll Snap Setup

Same CSS foundation as other scroll snap events:

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

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

• scroll-snap-type on the scrolling container.
• scroll-snap-align on each snap child.
• Listen for scrollsnapchanging on that same container.

📝 Syntax

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

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

onscrollsnapchanging = (event) => { };

Event type

A SnapEvent (inherits from Event).

SnapEvent properties

Feature detection

if ("onscrollsnapchanging" in window) {
  el.addEventListener("scrollsnapchanging", onPending);
} else {
  // Fallback: scroll + geometry / IntersectionObserver
}

⚖️ scrollsnapchanging vs Related Signals

Examples Gallery

Examples follow MDN Element: scrollsnapchanging event. Use a Chromium browser; scroll slowly so pending targets update before you release.

scrollingElem.addEventListener("scrollsnapchanging", (event) => {
  // remove previously-set "pending" classes
  const pendingElems = document.querySelectorAll(".pending");
  pendingElems.forEach((elem) => {
    elem.classList.remove("pending");
  });

  // Set current pending snap target class to "pending"
  event.snapTargetBlock.classList.add("pending");
});

Only the current pending snap child has class "pending"

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

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

Pending: Card 2

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

if ("onscrollsnapchanging" in window) {
  out.textContent = "supported — scroll slowly";
  box.addEventListener("scrollsnapchanging", (event) => {
    const t = event.snapTargetBlock;
    out.textContent = t
      ? "pending: " + (t.dataset.label || t.textContent.trim())
      : "pending (no block target)";
  });
} else {
  out.textContent = "scrollsnapchanging not supported";
}

pending: Card 3

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

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

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

pending while scrolling → selected after snap settles

const box = document.getElementById("snap-box");
const out = document.getElementById("out");
let changing = 0;
let changed = 0;

box.addEventListener("scrollsnapchanging", () => {
  changing += 1;
  out.textContent = "changing=" + changing + " · change=" + changed;
});

box.addEventListener("scrollsnapchange", () => {
  changed += 1;
  out.textContent = "changing=" + changing + " · change=" + changed;
});

changing=4 · change=1

🚀 Common Use Cases

• Preview which carousel card would become active before the user releases.
• Update soft focus / ghost highlights while dragging a snap rail.
• Drive page-dot “hover” state during a slow scrollbar or touch drag.
• Prefetch media for the pending slide before selection commits.
• Pair with scrollsnapchange for preview vs committed UI.

🔧 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 during the gesture; may fire multiple times per gesture.
• Not every crossed snap child—only the potential rest target.
• Related learning: scrollsnapchange, scrollend, addEventListener(), JavaScript hub.

💡 Best Practices