TheSnapEvent interface defines the event object for thescrollsnapchanging andscrollsnapchange events. Respectively, these fire on ascroll container when the browser determines that a new scroll snap target is pending (will be selected when the current scroll gesture ends), and when a new snap target is selected.

These events can be used to run code in response to new elements being snapped to;SnapEvent exposes references to the element snapped to in the inline and/or block direction. The property values available onSnapEvent correspond directly to the value of thescroll-snap-type CSS property set on the scroll container:

• If the snap axis is specified asblock (or a physical axis value that equates toblock in the current writing mode), onlysnapTargetBlock returns an element reference.
• If the snap axis is specified asinline (or a physical axis value that equates toinline in the current writing mode), onlysnapTargetInline returns an element reference.
• If the snap axis is specified asboth,snapTargetBlock andsnapTargetInline return an element reference.

Constructor

SnapEvent()Experimental

Creates a newSnapEvent object instance.

Instance properties

Inherits properties from its parent,Event.

snapTargetBlockRead onlyExperimental

Returns a reference to the element snapped to in the block direction when the event fired, ornull if scroll snapping only occurs in the inline direction so no element is snapped to in the block direction.

snapTargetInlineRead onlyExperimental

Returns a reference to the element snapped to in the inline direction when the event fired, ornull if scroll snapping only occurs in the block direction so no element is snapped to in the inline direction.

Examples

scrollsnapchanging example

In the followingscrollsnapchanging handler function snippet, we set thesnapTargetBlock element'sclass attribute topending using theElement.className property, which could be used to style the element differently when it becomes a pending snap target.

Note that this handler is intended to be set on a block-direction scroll container (vertically-scrolling if the page is set to a horizontalwriting-mode), therefore only thesnapTargetBlock element will change between multiple events firing.SnapEvent.snapTargetInline will returnnull, because no snapping occurs in the inline direction.

scrollingElem.addEventListener("scrollsnapchanging", (event) => {  // Set current pending snap target class to "pending"  event.snapTargetBlock.className = "pending";  // Logs the new pending block-direction snap target element  console.log(event.snapTargetBlock);  // Logs null; no inline snapping occurs  console.log(event.snapTargetInline);});

scrollsnapchange example

In the followingscrollsnapchange handler function snippet, we set aselected class on theSnapEvent.snapTargetBlock element, which could be used to style a newly-selected snap target to look like it has been selected (for example, with an animation).

scrollingElem.addEventListener("scrollsnapchange", (event) => {  event.snapTargetBlock.className = "selected";});

Specifications

Browser compatibility

See also

• scrollsnapchanging event
• scrollsnapchange event
• CSS scroll snap module
• Using scroll snap events
• Scroll Snap Events on developer.chrome.com (2024)