SnapEvent: snapTargetBlock property
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 snapTargetBlock
read-only property of the
SnapEvent
interface returns a reference to the element snapped to in the block direction when the event fired.
Specifically:
- In the case of the
scrollsnapchanging
event, this refers to a pending block-direction snap target (i.e. it will be selected when the current scroll gesture ends). - In the case of the
scrollsnapchange
event, this refers to a newly-selected block-direction snap target.
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
.
Value
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.
Examples
See the main SnapEvent
page for brief examples, and our Using scroll snap events guide for full examples and explanation.
Specifications
Specification |
---|
CSS Scroll Snap Module Level 2 # dom-snapevent-snaptargetblock |
Browser compatibility
BCD tables only load in the browser
See also
scrollsnapchanging
eventscrollsnapchange
event- CSS scroll snap module
- Scroll Snap Events on developer.chrome.com (2024)