Directional CSS with scroll-state(scrolled)

Directional CSS with scroll-state (scrolled)

摘要

新CSS特性scroll-state()登陆Chrome 144！通过scrolled状态查询，开发者能根据滚动方向实时调整样式。只需为父容器设置container-type: scroll-state，即可用@container监听上下左右滚动事件，轻松实现滚动响应式UI。比如导航栏下滑隐藏、上滑显现，还能结合动画让元素从滚动反方向滑入。目前支持stuck/snapped/scrollable等状态查询，为页面交互开启新可能~（注：滚动触发动画API仍在开发中）