[ @sdxc/u/overflow ]
overflow-anchor
Applies overflow-anchor, the browser's choice of which element holds the scroll position steady as content above it resizes.
import { overflowAnchor } from "@sdxc/u/overflow";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:
Post 1
Post 2
Post 3
Post 4
Loading more…
<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:
Header
Footer
<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.
u.hover(u.overflowAnchor())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.overflowAnchor())Signature
u.overflowAnchor(value?: OverflowAnchorValue)