Element: 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 Element
interface is fired on the scroll container at the end of a scrolling operation when a new scroll snap target has been selected, just before the corresponding scrollend
event fires.
A scrolling operation ends when the user finishes scrolling within a scroll container — for example using a touch gesture or by dragging the mouse pointer on a scroll bar — and releases the gesture.
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 that snaps to its children when scrolled using a combination of the CSS scroll-snap-type
property and other properties. For example:
main {
width: 250px;
height: 450px;
overflow: scroll;
scroll-snap-type: block mandatory;
}
The following JavaScript snippet would cause the scrollsnapchange
event to fire on the <main>
element when one of its children becomes a newly-selected snap target. In the handler function, we set a selected
class on the child referenced by the SnapEvent.snapTargetBlock
property, which could be used to style it to look like it has been selected (for example, with an animation) when the event fires.
const scrollingElem = document.querySelector("main");
scrollingElem.addEventListener("scrollsnapchange", (event) => {
event.snapTargetBlock.classList.add("selected");
});
Specifications
Specification |
---|
CSS Scroll Snap Module Level 2 # scrollsnapchange |
Browser compatibility
BCD tables only load in the browser
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)