Class SnapEvent

Namespace

CSharpToJavaScript.APIs.JS

Assembly

CSharpToJavaScript.dll

NOTE

Experimental

The SnapEvent interface defines the event object for the Elementscrollsnapchanging and Elementscrollsnapchange events. Respectively, these fire on a scroll 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.

[Value("SnapEvent")]
public class SnapEvent : Event

Inheritance

object

Event

SnapEvent

Inherited Members

Event.NONE

Event.CAPTURING_PHASE

Event.AT_TARGET

Event.BUBBLING_PHASE

Event.ComposedPath()

Event.StopPropagation()

Event.StopImmediatePropagation()

Event.PreventDefault()

Event.InitEvent(string, bool, bool)

Event.Type

Event.Target

Event.SrcElement

Event.CurrentTarget

Event.EventPhase

Event.CancelBubble

Event.Bubbles

Event.Cancelable

Event.ReturnValue

Event.DefaultPrevented

Event.Composed

Event.IsTrusted

Event.TimeStamp

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

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 on SnapEvent correspond directly to the value of the scroll-snap-type CSS property set on the scroll container:

-Elementscrollsnapchanging event
-Elementscrollsnapchange event
-CSS scroll snap module
-Using scroll snap events
-Scroll Snap Events on developer.chrome.com (2024)

See also on MDN

Constructors

SnapEvent()

public SnapEvent()

SnapEvent(string, SnapEventInit)

NOTE

Experimental

The SnapEvent() constructor creates a new
SnapEvent object instance.

public SnapEvent(string type, SnapEventInit eventInitDict = null)

Parameters

type string

eventInitDict SnapEventInit

Remarks

-Elementscrollsnapchanging event
-Elementscrollsnapchange event
-CSS scroll snap module
-Scroll Snap Events on developer.chrome.com (2024)

See also on MDN

Properties

SnapTargetBlock

NOTE

Experimental

The snapTargetBlock read-only property of the
SnapEvent interface returns a reference to the element snapped to in the block direction when the event fired.

[Value("snapTargetBlock")]
public Node? SnapTargetBlock { get; }

Property Value

Node

A Node representing the snapped element, or null if scroll snapping only occurs in the inline direction so no element is snapped to in the block direction.If the snapped element was a pseudo-element, the returned Node will be the owning element of that pseudo-element.

Remarks

Specifically:

The property values available on SnapEvent correspond directly to the value of the scroll-snap-type CSS property set on the scroll container. snapTargetBlock only returns an element reference if the snap axis is specified as block (or a physical axis value that equates to block in the current writing mode) or both.

-Elementscrollsnapchanging event
-Elementscrollsnapchange event
-CSS scroll snap module
-Scroll Snap Events on developer.chrome.com (2024)

See also on MDN

SnapTargetInline

NOTE

Experimental

The snapTargetInline read-only property of the
SnapEvent interface returns a reference to the element snapped to in the inline direction when the event fired.

[Value("snapTargetInline")]
public Node? SnapTargetInline { get; }

Property Value

Node

A Node representing the snapped element, or null if scroll snapping only occurs in the block direction so no element is snapped to in the inline direction.If the snapped element was a pseudo-element, the returned Node will be the owning element of that pseudo-element.

Remarks

Specifically:

The property values available on SnapEvent correspond directly to the value of the scroll-snap-type CSS property set on the scroll container. snapTargetInline only returns an element reference if the snap axis is specified as inline (or a physical axis value that equates to inline in the current writing mode) or both.

-Elementscrollsnapchanging event
-Elementscrollsnapchange event
-CSS scroll snap module
-Scroll Snap Events on developer.chrome.com (2024)

See also on MDN