demo · v133
Scroll-state Container Queries
Style based on whether a container's scroll position has pinned a child or whether there's content scrolled off-screen — declared in CSS, no scroll listeners.
sticky header (becomes black when stuck)
Item 1 — scroll down to pin the header to the top of the box. The container query
@container scroll-state(stuck: top) flips it black.Item 2 — the
::before rule on scrollable: top shows "more above" once the scroll position leaves the top edge.Item 3 — paragraph filler.
Item 4 — paragraph filler.
Item 5 — paragraph filler.
Item 6 — paragraph filler.
Item 7 — bottom of the scroller.
checking support…
the CSS
.scroller { container-type: scroll-state; overflow-y: auto; }
@container scroll-state(stuck: top) {
.sticky-head { background: black; color: white; }
}
@container scroll-state(scrollable: top) {
.scroller::before { content: "↑ more above"; }
}