[ @sdxc/u/overflow ]

overscroll-behavior

Applies overscroll-behavior, defaulting to "contain": a scroll past the end stays inside this element and the platform affordance — iOS rubber-banding, Android pull-to-refresh — survives.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.overscrollBehavior()`	`css({ overscrollBehavior: "contain" })`
`u.overscrollBehavior("none")`	`css({ overscrollBehavior: "none" })`

Examples

Basic example

Use overscrollBehavior(), which applies contain, to stop a scroll that reaches the end of an element from carrying on to the page. Scroll to the bottom of the box and keep scrolling:

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.

<div mix={[scroll("y"), overscrollBehavior(), 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>

Preventing the bounce

Use overscrollBehavior("none") to also suppress the bounce or pull-to-refresh at the edges, as in a full-screen canvas:

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.

<div
	mix={[scroll("y"), overscrollBehavior("none"), 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>

Chaining to the page

Use overscrollBehavior("auto") to restore the default, where a scroll past the end carries on to the page. Scroll to the bottom of the box and keep scrolling:

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.

<div
	mix={[scroll("y"), overscrollBehavior("auto"), 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.

u.hover(u.overscrollBehavior())

Responsive design

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

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

Signature

u.overscrollBehavior(value?: OverscrollBehaviorValue)