Scroll Snap Align

Set scroll snap alignment

Syntax

visual="snap-align:[value]"

Values

Value	CSS Output	Description
start	scroll-snap-align: start	Snap to start
end	scroll-snap-align: end	Snap to end
center	scroll-snap-align: center	Snap to center
none	scroll-snap-align: none	No snap

Examples

<div visual="snap-align:start">Snap to start</div>

Preview

Snap Alignment

visual="snap-align:start" - Where to snap within container

start

center

end

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">start</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">end</div>
</div>