Scroll Snap Type

Set scroll snap type

Syntax

visual="snap-type:[value]"

Values

Value	CSS Output	Description
none	scroll-snap-type: none	No snapping
x	scroll-snap-type: x mandatory	Horizontal snap
y	scroll-snap-type: y mandatory	Vertical snap
both	scroll-snap-type: both mandatory	Both axes
x-proximity	scroll-snap-type: x proximity	Horizontal proximity
y-proximity	scroll-snap-type: y proximity	Vertical proximity

Examples

<div visual="snap-type:x">Horizontal snap container</div>

Preview

Snap Type

visual="snap-type:x" - Enable scroll snapping

x

y

both

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
</div>