[ @sdxc/u/overflow ]
scroll-snap-align
Applies scroll-snap-align, defaulting to "start", on the snap *items* — the children of the scroll container — while u.scrollSnapType() goes on the *container*; swapping the two silently disables snapping either way.
import { scrollSnapAlign } from "@sdxc/u/overflow";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.scrollSnapAlign() | css({ scrollSnapAlign: "start" }) |
u.scrollSnapAlign("center") | css({ scrollSnapAlign: "center" }) |
Examples
Basic example
Use scrollSnapAlign("center") on the children of a snapping container to rest each one in its centre. Scroll the row:
1
2
3
4
<div
mix={[
scroll("x"),
scrollSnapType(),
hstack({ gap: 4 }),
is(96),
maxIs("100%"),
p(4),
...,
]}
>
<div mix={[scrollSnapAlign("center"), shrink(), is(56), bs(32), ...]}>1</div>
<div mix={[scrollSnapAlign("center"), shrink(), is(56), bs(32), ...]}>2</div>
<div mix={[scrollSnapAlign("center"), shrink(), is(56), bs(32), ...]}>3</div>
<div mix={[scrollSnapAlign("center"), shrink(), is(56), bs(32), ...]}>4</div>
</div>Snapping to the start
Call scrollSnapAlign(), which applies start, to rest each child against the container's start edge:
1
2
3
4
<div
mix={[
scroll("x"),
scrollSnapType(),
hstack({ gap: 4 }),
is(96),
maxIs("100%"),
p(4),
...,
]}
>
<div mix={[scrollSnapAlign(), shrink(), is(56), bs(32), ...]}>1</div>
<div mix={[scrollSnapAlign(), shrink(), is(56), bs(32), ...]}>2</div>
<div mix={[scrollSnapAlign(), shrink(), is(56), bs(32), ...]}>3</div>
<div mix={[scrollSnapAlign(), shrink(), is(56), bs(32), ...]}>4</div>
</div>Snapping to the end
Use scrollSnapAlign("end") to rest each child against the container's end edge:
1
2
3
4
<div
mix={[
scroll("x"),
scrollSnapType(),
hstack({ gap: 4 }),
is(96),
maxIs("100%"),
p(4),
...,
]}
>
<div mix={[scrollSnapAlign("end"), shrink(), is(56), bs(32), ...]}>1</div>
<div mix={[scrollSnapAlign("end"), shrink(), is(56), bs(32), ...]}>2</div>
<div mix={[scrollSnapAlign("end"), shrink(), is(56), bs(32), ...]}>3</div>
<div mix={[scrollSnapAlign("end"), shrink(), is(56), bs(32), ...]}>4</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.scrollSnapAlign())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.scrollSnapAlign())Signature
u.scrollSnapAlign(value?: ScrollSnapAlignValue)