# scroll

> Turns the element into a scroll container that reveals a scrollbar only where content actually overflows the given axis, defaulting to `"both"`.

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

Turns the element into a scroll container that reveals a scrollbar only
where content actually overflows the given axis, defaulting to `"both"`.
Composes `u.overflowX("auto")`/`u.overflowY("auto")` for the selected axis.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.scroll()` | `css({ overflowX: "auto", overflowY: "auto" })` |
| `u.scroll("y")` | `css({ overflowY: "auto" })` |

## Examples

### Basic example

Use `scroll()` to turn an element into a scroll container that shows a scrollbar only on an axis its content overflows. Scroll the photo in any direction:

```tsx
<div
	mix={[scroll(), is(72), maxIs("100%"), bs(40), border({ color: "neutral.border", width: 1 })]}
>
	<div mix={[is(160), bs(96), ...]} />
</div>
```

### Scrolling vertically

Pass `"y"` to scroll only vertically, like a list in a fixed-height panel:

```tsx
<div mix={[scroll("y"), bs(24), is(72), maxIs("100%"), ...]}>
	<p mix={[...]}>
		This paragraph is taller than its box, so the last lines of it do not fit. Scroll to read
		the rest, while the page around the box stays exactly where it is.
	</p>
</div>
```

### Scrolling horizontally

Pass `"x"` to scroll only horizontally, like a row of cards. Scroll the row sideways:

```tsx
<div mix={[scroll("x"), hstack({ gap: 4 }), is(96), maxIs("100%"), p(4), ...]}>
	<div mix={[shrink(), is(24), ...]}>1</div>
	<div mix={[shrink(), is(24), ...]}>2</div>
	<div mix={[shrink(), is(24), ...]}>3</div>
	<div mix={[shrink(), is(24), ...]}>4</div>
	<div mix={[shrink(), is(24), ...]}>5</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.scroll())
```

## Responsive design

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

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

## Signature

```ts
u.scroll(axis?: ScrollAxis)
```