[ @sdxc/u/overflow ]
scroll-snap-stop
Applies scroll-snap-stop to a snap item, defaulting to "always" so a fast flick rests on the item and one swipe advances exactly one page.
import { scrollSnapStop } from "@sdxc/u/overflow";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.scrollSnapStop() | css({ scrollSnapStop: "always" }) |
u.scrollSnapStop("normal") | css({ scrollSnapStop: "normal" }) |
Examples
Basic example
Use scrollSnapStop(), which applies always, on snap items so a fast swipe stops on the next one instead of flying past it. Flick the row quickly with a trackpad or touch:
1
2
3
4
<div
mix={[
scroll("x"),
scrollSnapType(),
hstack({ gap: 4 }),
is(96),
maxIs("100%"),
p(4),
...,
]}
>
<div mix={[scrollSnapAlign(), scrollSnapStop(), shrink(), is(56), bs(32), ...]}>
1
</div>
<div mix={[scrollSnapAlign(), scrollSnapStop(), shrink(), is(56), bs(32), ...]}>
2
</div>
<div mix={[scrollSnapAlign(), scrollSnapStop(), shrink(), is(56), bs(32), ...]}>
3
</div>
<div mix={[scrollSnapAlign(), scrollSnapStop(), shrink(), is(56), bs(32), ...]}>
4
</div>
</div>Letting momentum skip items
Use scrollSnapStop("normal") to let a fast swipe carry past several items before snapping. Flick the row quickly and compare:
1
2
3
4
<div
mix={[
scroll("x"),
scrollSnapType(),
hstack({ gap: 4 }),
is(96),
maxIs("100%"),
p(4),
...,
]}
>
<div
mix={[scrollSnapAlign(), scrollSnapStop("normal"), shrink(), is(56), bs(32), ...]}
>
1
</div>
<div
mix={[scrollSnapAlign(), scrollSnapStop("normal"), shrink(), is(56), bs(32), ...]}
>
2
</div>
<div
mix={[scrollSnapAlign(), scrollSnapStop("normal"), shrink(), is(56), bs(32), ...]}
>
3
</div>
<div
mix={[scrollSnapAlign(), scrollSnapStop("normal"), 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.scrollSnapStop())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.scrollSnapStop())Signature
u.scrollSnapStop(value?: ScrollSnapStopValue)