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

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

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.

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

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

```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 to the end

Use `scrollSnapAlign("end")` to rest each child against the container's end edge:

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

```ts
u.hover(u.scrollSnapAlign())
```

## Responsive design

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

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

## Signature

```ts
u.scrollSnapAlign(value?: ScrollSnapAlignValue)
```