Allows authors to style descendants of containers based on the most recent scrolling direction. Example: .scrolling-up { translate: 80px 0; transition: 0.4s translate; } html { container-type: scroll-state; } @container scroll-state(scrolled: top) { .scrolling-up { translate: 0 0; } }
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. The scroll-state(scrolled:) feature provides a CSS-only solution for this task. It allows developers to style elements based on the most recent scroll direction directly in CSS, removing the need for a JavaScript-based approach. This helps simplify the implementation of scroll-aware components like "hidey bars" and can lead to better performance.
Explainers: https://github.com/w3c/csswg-drafts/blob/main/css-conditional-5/scroll_state_explainer.md#scrolled