SnapEvent

Constructor

SnapEvent()

Creates a new SnapEvent object instance.

Instance properties

Inherits properties from its parent, Event.

snapTargetBlock Read only

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 Read only

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

scrollsnapchanging example

In the following scrollsnapchanging handler function snippet, we set the snapTargetBlock element's class attribute to pending using the Element.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 horizontal writing-mode), therefore only the snapTargetBlock element will change between multiple events firing. SnapEvent.snapTargetInline will return null, 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 following scrollsnapchange handler function snippet, we set a selected class on the SnapEvent.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)