# scrollbar-gutter

> Applies `scrollbar-gutter`, defaulting to `"stable"`, so the container is already the size it settles at and content holds its position the moment a scrollbar appears.

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

Applies `scrollbar-gutter`, defaulting to `"stable"`, so the container is
already the size it settles at and content holds its position the moment a
scrollbar appears. Takes effect on a scroll container (`u.scroll()`).

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.scrollbarGutter()` | `css({ scrollbarGutter: "stable" })` |
| `u.scrollbarGutter("stable both-edges")` | `css({ scrollbarGutter: "stable both-edges" })` |
| `u.scrollbarGutter("auto")` | `css({ scrollbarGutter: "auto" })` |

## Examples

### Basic example

Use `scrollbarGutter()` on a scroll container to reserve room for its scrollbar before one appears, so content does not shift when it overflows. Turn on always-visible scrollbars in your system settings to see the gutter:

```tsx
<div mix={[...]}>
	<div mix={[scroll("y"), scrollbarGutter(), bs(32), is(56), ...]}>
		<p mix={[...]}>This short text fits.</p>
	</div>
	<div mix={[scroll("y"), scrollbarGutter(), bs(32), is(56), ...]}>
		<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>
</div>
```

### Reserving both edges

Pass `"stable both-edges"` to reserve the gutter on both sides, keeping content centred:

```tsx
<div
	mix={[
		scroll("y"),
		scrollbarGutter("stable both-edges"),
		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>
```

## Applying on a state

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

```ts
u.hover(u.scrollbarGutter())
```

## Responsive design

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

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

## Signature

```ts
u.scrollbarGutter(value?: ScrollbarGutterValue)
```