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 anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
Thescrollsnapchange event of theWindow interface is fired on thewindow at the end of a scrolling operation when a new scroll snap target is selected.
This event works in much the same way as theElement interface'sscrollsnapchange 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 likeaddEventListener(), 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 thescroll-snap-type property on the<html> element:
html { scroll-snap-type: block mandatory;}The following JavaScript snippet would cause thescrollsnapchange 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 aselected class on the child referenced by theSnapEvent.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
See also
scrollsnapchangingeventscrollendeventSnapEvent- CSS
scroll-snap-typeproperty - CSS scroll snap module
- Using scroll snap events
- Scroll Snap Events on developer.chrome.com (2024)