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

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

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. `"normal"`
lets momentum carry past it. Pair with `u.scrollSnapAlign()`.

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

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

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

```ts
u.hover(u.scrollSnapStop())
```

## Responsive design

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

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

## Signature

```ts
u.scrollSnapStop(value?: ScrollSnapStopValue)
```