# scroll-snap-type

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

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

Applies `scroll-snap-type` to a scroll container, defaulting to `"inline
mandatory"`, the paged-carousel case; pass `"none"` to disable snapping.
Snapped children need `u.scrollSnapAlign()`.

## 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:

```tsx
<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:

```tsx
<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:

```tsx
<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.

```ts
u.hover(u.scrollSnapType())
```

## Responsive design

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

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

## Signature

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