v144 · css

@scroll-state scrolled support

Allows authors to style descendants of containers based on the most recent scrolling direction.

concepts

  1. Scrolled State Style

    Style a sticky header differently depending on whether the user has scrolled. The `scrolled` axis carries `top`, `bottom`, `x`, `y`, and `none` values — all in pure CSS, no scroll listener.

  2. Direction-aware Nav

    The motivating use case from the spec PR: a header that hides on down-scroll and pops back on up-scroll, in pure CSS via container queries — no rAF loop, no scroll throttling.

  3. State Matrix

    Every value of the scrolled axis — top, bottom, y, x, none — on the same scroller. Watch named lanes light up as each container query matches.

  4. Overflow Indicator

    Top and bottom fade shadows that appear exactly when the list has content beyond the visible edge — driven by @scroll-state(scrolled: top/bottom) with zero scroll listeners. Includes a side-by-side comparison with the JavaScript equivalent.

why it shipped

Web developers frequently implement UI patterns that respond to the user's scroll direction. A classic example is a header that auto-hides as the user scrolls down the page and reappears as they scroll up.Currently, this relies on JavaScript to track scroll position, which can add performance overhead and code complexity.

references