demo · v144
State Matrix
Every value of the scrolled axis — top, bottom, y, x, none — on the same scroller. Scroll the y-container, then the x-container, and watch the named lanes light up as the corresponding container query matches. Pure CSS, no JS listeners.
scroll-state container queries: checking…
Use the buttons or scroll by hand to light up each scroll-state lane.
vertical scroller
scrolled: top — should be green when not scrolled
scrolled: y — should be blue once you scroll vertically
scrolled: bottom — should turn red at the very end
scrolled: none — only if no axis scrolled (top & not bottom)
--
--
--
--
--
--
--
--
--
--
--
--
(bottom of scroller)
horizontal scroller
scrolled: x
scrolled: top (start)
scrolled: bottom (end)
end marker
the API
.scroller {
container-type: scroll-state;
container-name: --sc;
}
@container --sc scroll-state(scrolled: bottom) {
.lane { background: red; }
}
@container --sc scroll-state(scrolled: y) {
.lane { background: blue; }
}