Window: scrollsnapchange event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The scrollsnapchange
event of the 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 Element
interface's scrollsnapchange
event, except that the overall HTML document has to be set as the scroll snap container (i.e., scroll-snap-type
is set on the <html>
element).
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("scrollsnapchange", (event) => {});
onscrollsnapchange = (event) => {};
Event type
Examples
Basic usage
Let's say we have a <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 scroll-snap-type
property on the <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 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
Specification |
---|
CSS Scroll Snap Module Level 2 # scrollsnapchange |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scrollsnapchange event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
See also
scrollsnapchanging
eventscrollend
eventSnapEvent
- CSS
scroll-snap-type
property - CSS scroll snap module
- Using scroll snap events
- Scroll Snap Events on developer.chrome.com (2024)