W3cubDocs

/Web APIs

SnapEvent: SnapEvent() constructor

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 SnapEvent() constructor creates a new SnapEvent object instance.

Syntax

new SnapEvent(type, init)

Parameters

type

A string representing the type of event. For scrollsnapchanging events, this is scrollsnapchanging. For scrollsnapchange events, this is scrollsnapchange.

init

An object containing the following properties:

snapTargetBlock Optional: Returns a reference to the element snapped to in the block direction when the event fired, or null if scroll snapping only occurs in the inline direction so no element is snapped to in the block direction.
snapTargetInline Optional: Returns a reference to the element snapped to in the inline direction when the event fired, or null if scroll snapping only occurs in the block direction so no element is snapped to in the inline direction.

Examples

A developer would not use this constructor manually. A new SnapEvent object is constructed when a handler is invoked as a result of the scrollsnapchanging or scrollsnapchange events firing.

For example:

mainElem.addEventListener("scrollsnapchange", (event) => {
  // …

  // Log a SnapEvent object instance to the console
  console.log(event);
});

Specifications

Specification
CSS Scroll Snap Module Level 2> # dom-snapevent-snapevent>

Browser compatibility