Style based on scroll direction with this new scroll-state query feature.

Una provides insights into web accessibility, inclusive design, and user experience best practices. Developers can explore Una's  articles, guides, and resources to gain a deeper understanding of accessibility standards, design principles, and usability considerations. By embracing Una's teachings, developers can ensure that their digital products are accessible to all users, regardless of their abilities or impairments, and create more inclusive and user-friendly experiences for everyone.

Una Kravets

CSS scroll-state queries now include a `scrolled` value in Chrome 144 that detects scroll direction (up, down, left, right). By setting `container-type: scroll-state` on a parent element, you can apply styles based on the user's most recent scroll direction. Common use cases include hiding navigation bars when scrolling down and showing them when scrolling up, or creating directional scroll entry animations. The feature works as progressive enhancement, with unsupported browsers simply ignoring the scroll-state queries while maintaining existing functionality.

Directional CSS with scroll-state(scrolled)