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


