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 anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Thescrollsnapchange event of theElement interface is fired on thescroll container at the end of a scrolling operation when a new scroll snap target has been selected, just before the correspondingscrollend 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 likeaddEventListener(), or set an event handler property.

addEventListener("scrollsnapchange", (event) => { })onscrollsnapchange = (event) => { }

Event type

ASnapEvent, which inherits from the genericEvent type.

Examples

Basic usage

Let's say we have a<main> element containing significant content that causes it to scroll:

html

<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 CSSscroll-snap-type property and other properties. For example:

css

main {  width: 250px;  height: 450px;  overflow: scroll;  scroll-snap-type: block mandatory;}

The following JavaScript snippet would cause thescrollsnapchange event to fire on the<main> element when one of its children becomes a newly-selected snap target. In the handler function, we set aselected class on the child referenced by theSnapEvent.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");});