Element: scrollsnapchange event

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

A SnapEvent, which inherits from the generic Event 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 CSS scroll-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 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