In JavaScript, document scrollsnapchange fires on the document scroll container when scrolling ends and a new scroll snap target is selected (MDN). The overall document must be the snap container (scroll-snap-type on <html>).
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
addEventListener("scrollsnapchange", …)
Call
What it does
addEventListener("scrollsnapchange", …)
Primary signature.
Built into the browser. Listen with document.addEventListener("scrollsnapchange", …) — no import required.
Library declarations
JavaScript
addEventListener("scrollsnapchange", …)
Parameters
Parameter
Description
scroll-snap-type on html
Required. Makes the document the snap container (MDN)
scroll-snap-align
Required. Marks snap children
Listener
Required. addEventListener or onscrollsnapchange
SnapEvent
Required. snapTargetBlock / snapTargetInline
Return Value
Return Value
Description
*
Fires as a Document event (listener receives the Event object).
JavaScript Examples
Example 1 — Mark snapTargetBlock (MDN)
MDN pattern: add a selected class when a new snap target is chosen.
JavaScript
// Requires: scroll-snap-type on html + scroll-snap-align on children
document.addEventListener("scrollsnapchange", (event) => {
document.querySelectorAll(".selected").forEach((el) => {
el.classList.remove("selected");
});
if (event.snapTargetBlock) {
event.snapTargetBlock.classList.add("selected");
}
});
MDN: it fires on the document scroll container at the end of a scrolling operation when a new scroll snap target is selected. The document (html) must be the scroll snap container.
MDN marks it Experimental and Limited availability (not Baseline). It is not Deprecated or Non-standard. Feature-detect before production use.
A SnapEvent (inherits Event). Use snapTargetBlock and/or snapTargetInline for the newly selected snap target element (MDN).
Set scroll-snap-type on the html element (for example block mandatory) and scroll-snap-align on snap children (MDN).
scrollend means scrolling finished. scrollsnapchange means a new snap target was selected at the end of scrolling. You often use both.
Same idea when an Element is the snap container (overflow + scroll-snap-type on that element). Document scrollsnapchange is for when html is the snap container.
