[ @sdxc/u/overflow ]

scroll-behavior

Applies scroll-behavior, defaulting to "smooth", so anchor jumps and programmatic scrolls animate.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { scrollBehavior } from "@sdxc/u/overflow";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.scrollBehavior()`	`css({ scrollBehavior: "smooth" })`
`u.motionSafe(u.scrollBehavior())`	`css({ "@media (prefers-reduced-motion: no-preference)": { scrollBehavior: "smooth" } })`
`u.scrollBehavior("auto")`	`css({ scrollBehavior: "auto" })`

Examples

Basic example

Use scrollBehavior(), which applies smooth, to animate anchor jumps and programmatic scrolls inside a scroll container. Click a link:

Section 1

Section 2

Section 3

<div mix={[vstack({ gap: 4 }), is(72), maxIs("100%")]}>
	<nav mix={[hstack({ gap: 3 })]}>
		<a href="#smooth-1">Section 1</a>
		<a href="#smooth-2">Section 2</a>
		<a href="#smooth-3">Section 3</a>
	</nav>
	<div mix={[scroll("y"), scrollBehavior(), vstack({ gap: 3 }), bs(48), ...]}>
		<section id="smooth-1" mix={[shrink(), bs(32), ...]}>
			Section 1
		</section>
		<section id="smooth-2" mix={[shrink(), bs(32), ...]}>
			Section 2
		</section>
		<section id="smooth-3" mix={[shrink(), bs(32), ...]}>
			Section 3
		</section>
	</div>
</div>

Respecting reduced motion

Wrap the call in motionSafe() so the scroll animates only when the reader has not asked for less motion. Turn on Reduce motion in your system's accessibility settings and click a link again to see an instant jump:

Section 1

Section 2

Section 3

<div mix={[vstack({ gap: 4 }), is(72), maxIs("100%")]}>
	<nav mix={[hstack({ gap: 3 })]}>
		<a href="#calm-1">Section 1</a>
		<a href="#calm-2">Section 2</a>
		<a href="#calm-3">Section 3</a>
	</nav>
	<div
		mix={[scroll("y"), motionSafe(scrollBehavior()), vstack({ gap: 3 }), bs(48), ...]}
	>
		<section id="calm-1" mix={[shrink(), bs(32), ...]}>
			Section 1
		</section>
		<section id="calm-2" mix={[shrink(), bs(32), ...]}>
			Section 2
		</section>
		<section id="calm-3" mix={[shrink(), bs(32), ...]}>
			Section 3
		</section>
	</div>
</div>

Applying on a state

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

u.hover(u.scrollBehavior())

Responsive design

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

u.at("md", u.scrollBehavior())

Signature

u.scrollBehavior(value?: ScrollBehaviorValue)