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.

6m read timeFrom una.im
Post cover image
Table of contents
How It WorksThe scrolled queryDemo: Hidey-bar with fixed positioningDemo: Hidey-bar with sticky positioningDemo: Directional scroll entry animation
2 Comments

Sort: