# overflow-anchor

> Applies `overflow-anchor`, the browser's choice of which element holds the scroll position steady as content above it resizes.

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

Applies `overflow-anchor`, the browser's choice of which element holds the
scroll position steady as content above it resizes. The `"none"` default
suits infinite-scroll sentinels, whose own growth fights anchoring.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.overflowAnchor()` | `css({ overflowAnchor: "none" })` |
| `u.overflowAnchor("auto")` | `css({ overflowAnchor: "auto" })` |

## Examples

### Basic example

Use `overflowAnchor()`, which applies `none`, on an infinite-scroll sentinel so the browser never anchors the scroll position to it as new items load above it:

```tsx
<div mix={[scroll("y"), vstack({ gap: 3 }), bs(48), is(72), maxIs("100%"), ...]}>
	<div mix={[shrink(), ...]}>Post 1</div>
	<div mix={[shrink(), ...]}>Post 2</div>
	<div mix={[shrink(), ...]}>Post 3</div>
	<div mix={[shrink(), ...]}>Post 4</div>
	<p mix={[overflowAnchor(), ...]}>Loading more…</p>
</div>
```

### Restoring scroll anchoring

Use `overflowAnchor("auto")` to let an element be chosen as the scroll anchor again inside a container that opted out:

```tsx
<div
	mix={[
		scroll("y"),
		overflowAnchor(),
		vstack({ gap: 3 }),
		bs(48),
		is(72),
		maxIs("100%"),
		...,
	]}
>
	<div mix={[shrink(), ...]}>Header</div>
	<article mix={[overflowAnchor("auto"), shrink(), bs(32), ...]}>
		The message being read
	</article>
	<div mix={[shrink(), ...]}>Footer</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.overflowAnchor())
```

## Responsive design

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

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

## Signature

```ts
u.overflowAnchor(value?: OverflowAnchorValue)
```