#优质博文 #前端 #CSS #渐进增强 #新特性 #course
一篇关于 scroll-state(scrolled) 很详细的介绍，该查询允许开发者根据用户最新的滚动方向来应用样式，从而实现响应式用户界面。
Directional CSS with scroll-state(scrolled)

AI 摘要：本文详细介绍了 Chrome 144 中新增的 scroll-state(scrolled) CSS 查询。作为 scroll-state() 容器查询 (container queries) 家族的一部分，它使开发者能够根据用户最近的滚动方向动态调整页面元素的样式。文章首先解释了其工作原理，包括如何设置 container-type: scroll-state 以及 scrolled 查询接受的不同方向值。随后，通过几个实用的案例演示了其应用，包括在用户向下滚动时隐藏顶部导航栏并在向上滚动时重新显示（使用 fixed 或 sticky 定位），以及结合滚动触发动画 (scroll-triggered animations) 实现方向性的元素进入效果。文章强调了这种新特性在渐进增强 (Progressive Enhancement) 方面的优势，展示了无需 JavaScript 即可实现复杂交互的可能性。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. scroll-state(scrolled) 查询介绍
• 新特性：Chrome 144 中引入的 CSS 新查询，用于根据用户滚动方向应用样式。
• 核心功能：允许开发者基于用户最新的滚动方向来动态修改元素的样式。
2. 工作原理
• scroll-state() 查询家族：scrolled 是 scroll-state() 容器查询 (container queries) 的一个新成员，同系列还包括 stuck、snapped 和 scrollable。
• 启用方式：需在父元素上设置 container-type: scroll-state。
• 查询语法：通过 @container scroll-state(<type>: <value>) 规则块来应用基于滚动状态的样式。
3. scrolled 查询的详细说明
• 检测目标：检测最近期的相对滚动方向。
• 支持值：
• 方向性值：top、right、bottom、left。
• 逻辑方向值：block-start、inline-start、block-end、inline-end。
• 轴向速记：x、y、block、inline。
• 初始状态：none，表示容器尚未发生相对滚动。
• 动态性：浏览器会实时更新此状态，允许根据用户滚动方向（向上、向下、向左、向右）来为子元素设置样式。
4. 实际应用案例
• 案例一：使用固定定位 (fixed positioning) 实现的隐藏导航栏 (Hidey-bar)
• 功能描述：当用户向下滚动时隐藏顶部导航栏，向上滚动时重新显示。
• 优势：增加屏幕可视空间，且无需完全滚动回顶部即可访问导航。
• 渐进增强 (Progressive Enhancement)：不支持此特性的浏览器将始终显示导航栏，不影响基本功能。
• 案例二：使用粘性定位 (sticky positioning) 实现的隐藏导航栏 (Hidey-bar)
• 作者偏好方案：采用 position: sticky 实现类似的导航栏隐藏/显示功能。
• 渐进增强优势：对于不支持的浏览器，导航栏保持原有的粘性定位行为，不破坏现有用户体验。
• 用户体验：导航栏在开始滚动时动画隐藏，向上滚动时动画出现。
• 案例三：方向性滚动进入动画 (Directional scroll entry animation)
• 实现原理：结合 scroll-state(scrolled) 和实验性的滚动触发动画 (scroll-triggered animations) API，根据滚动方向改变元素的进入动画效果。
• 示例：根据是向上滚动还是向下滚动，使卡片从不同的方向（例如，从底部或从顶部）滑入视图。
• 发展前景：尽管当前的滚动触发动画 API 仍处于早期阶段并存在一些限制（如动画重播问题），但其潜力巨大，有望实现更自然的用户界面动效。

author Una

Una.im

Directional CSS with scroll-state(scrolled)

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