files/en-us/web/api/window/scrollsnapchange_event/index.md
{{APIRef}}{{SeeCompatTable}}
The scrollsnapchange event of the {{domxref("Window")}} interface is fired on the window at the end of a scrolling operation when a new scroll snap target is selected.
This event works in much the same way as the {{domxref("Element")}} interface's scrollsnapchange event, except that the overall HTML document has to be set as the scroll snap container (i.e., {{cssxref("scroll-snap-type")}} is set on the {{htmlelement("html")}} element).
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
addEventListener("scrollsnapchange", (event) => { })
onscrollsnapchange = (event) => { }
A {{domxref("SnapEvent")}}, which inherits from the generic {{domxref("Event")}} type.
Let's say we have a {{htmlelement("main")}} element containing significant content that causes it to scroll:
<main>
<!-- Significant content -->
</main>
The <main> element can be turned into a scroll container using a combination of CSS properties, for example:
main {
width: 250px;
height: 450px;
overflow: scroll;
}
We can then implement scroll snapping behavior on the scrolling content by specifying the {{cssxref("scroll-snap-type")}} property on the {{htmlelement("html")}} element:
html {
scroll-snap-type: block mandatory;
}
The following JavaScript snippet would cause the scrollsnapchange event to fire on the HTML document when a child of the <main> element becomes a newly-selected snap target. In the handler function, we set a selected class on the child referenced by the {{domxref("SnapEvent.snapTargetBlock")}}, which could be used to style it to look like it has been selected (for example, with an animation) when the event fires.
window.addEventListener("scrollsnapchange", (event) => {
event.snapTargetBlock.classList.add("selected");
});
{{Specifications}}
{{Compat}}