# thinScrollbar

> Requests a thin scrollbar that reserves its gutter up front, so layout stays put whether or not the scrollbar is showing.

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

Requests a thin scrollbar that reserves its gutter up front, so layout
stays put whether or not the scrollbar is showing. Pair with
`u.scroll()`/`u.overflow()` on the same scroll container.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.thinScrollbar()` | `css({ scrollbarWidth: "thin", scrollbarGutter: "stable" })` |

## Examples

### Basic example

Use `thinScrollbar()` with `scroll("y")` to ask for a thin scrollbar whose gutter is reserved up front. Compare it with the default one beside it:

```tsx
<div mix={[...]}>
	<div mix={[scroll("y"), thinScrollbar(), 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 mix={[scroll("y"), 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>
```

## Applying on a state

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

```ts
u.hover(u.thinScrollbar())
```

## Responsive design

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

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

## Signature

```ts
u.thinScrollbar()
```