v149 · CSS

Scroll State Inspector

Three side-by-side panels, each demonstrating a different scroll state condition. Every active state is shown live inside the panel as a visual change driven entirely by CSS container queries.

Feature detection: checking…

stuck — position: sticky

stuck: none

Scroll this panel down. When the bar reaches the top edge it becomes sticky and scroll-state(stuck: top) activates — inverting the bar's colours.

Available values: none, top, right, bottom, left, block-start, block-end, inline-start, inline-end.

The query fires as soon as the element's sticky inset is hit. No threshold — it's binary.

snapped — scroll-snap

Item A
Item B
Item C
Item D — currently snapped?
Item E

scrollable — overflow

↑ more above

Scroll this panel. Green gradient bars appear at the top or bottom only when content extends in that direction — driven by scroll-state(scrollable: top) and scrollable: bottom.

The key insight: "scrollable" means there IS more content in that direction. When you reach the bottom, the bottom indicator disappears. Reach the top, the top indicator disappears.

Available direction values: x, y, block, inline, top, right, bottom, left.

Unlike stuck and snapped, scrollable is set on the scroll container itself, not on children.

↓ more below
/* ── Stuck ── */
.sticky-el { container-type: scroll-state; position: sticky; top: 0; }
@container scroll-state(stuck: top) { .bar { background: black; } }

/* ── Snapped ── */
.snap-item { container-type: scroll-state; scroll-snap-align: start; }
@container scroll-state(snapped: y) { .item { background: black; } }

/* ── Scrollable ── */
.scroll-wrap { container-type: scroll-state; position: relative; }
/* .scroll-wrap's scroll child must overflow */
@container scroll-state(scrollable: bottom) { .fade-bottom { opacity: 1; } }
@container scroll-state(scrollable: top)    { .fade-top    { opacity: 1; } }

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗