[ @sdxc/u/overflow ]

scroll-snap-type

Applies scroll-snap-type to a scroll container, defaulting to "inline mandatory", the paged-carousel case; pass "none" to disable snapping.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { scrollSnapType } from "@sdxc/u/overflow";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.scrollSnapType()`	`css({ scrollSnapType: "inline mandatory" })`
`u.scrollSnapType("block", "proximity")`	`css({ scrollSnapType: "block proximity" })`
`u.scrollSnapType("none")`	`css({ scrollSnapType: "none" })`

Examples

Basic example

Use scrollSnapType(), which applies inline mandatory, on a scroll container and scrollSnapAlign() on its children to make scrolling rest on a child. Scroll the row:

<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 by proximity

Use scrollSnapType("block", "proximity") to snap vertically, and only when a scroll ends close to a snap position:

<div
	mix={[
		scroll("y"),
		scrollSnapType("block", "proximity"),
		vstack({ gap: 4 }),
		bs(64),
		is(72),
		maxIs("100%"),
		p(4),
		...,
	]}
>
	<div mix={[scrollSnapAlign(), shrink(), bs(32), ...]}>1</div>
	<div mix={[scrollSnapAlign(), shrink(), bs(32), ...]}>2</div>
	<div mix={[scrollSnapAlign(), shrink(), bs(32), ...]}>3</div>
	<div mix={[scrollSnapAlign(), shrink(), bs(32), ...]}>4</div>
	<div mix={[scrollSnapAlign(), shrink(), bs(32), ...]}>5</div>
	<div mix={[scrollSnapAlign(), shrink(), bs(32), ...]}>6</div>
</div>

Turning snapping off

Use scrollSnapType("none") to turn snapping off, for example at a width where the carousel becomes a grid. Scroll the row and it stops wherever you leave it:

<div
	mix={[
		scroll("x"),
		scrollSnapType("none"),
		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>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.scrollSnapType())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.scrollSnapType())

Signature

u.scrollSnapType(axis?: ScrollSnapAxis | "none", strictness?: ScrollSnapStrictness)