CSS scroll-state() 怎样根据容器滚动状态切换样式

如果页面只是想在“还能不能继续向上滚”“最近向哪个方向滚过”“元素是否吸附”或“sticky 是否已经卡住”时改变样式，不必先写一套 JavaScript 滚动监听。CSS 的 scroll-state 容器查询可以把这些状态交给 @container 判断，但它是渐进增强能力，仍要保留不支持时可用的基础样式。

最小迁移路径是：在目标容器上声明 container-type: scroll-state，可选地设置 container-name，再用 @container 名称 scroll-state(条件) 只调整该容器的后代元素。

本文按“旧思路—新写法—回归检查”的顺序，聚焦容器滚动状态查询本身，不展开 JavaScript 事件节流或滚动时间线动画。

从旧的滚动监听迁移到 scroll-state 查询

旧写法通常是监听 scroll，读取位置，再给按钮或标题加 class。问题在于监听频率、状态同步和组件边界都需要脚本维护。scroll-state 查询把“状态条件”和“后代样式”分开：容器声明自己可被查询，@container 负责匹配条件，命中的规则只作用于后代。

这里的边界很重要：查询不是给容器自身“加状态类”，而是让容器内部的元素获得条件样式。因此，需要改变的元素最好放在查询容器的后代结构中。

变更表：声明、描述符和作用域

常用描述符有四类：scrollable 询问还能否向某方向滚动，scrolled 询问最近的滚动方向，snapped 依赖滚动吸附结构，stuck 依赖 position: sticky 卡在边界的状态。不要把它们当成普通 CSS 属性值，也不要用一个描述符替代另一个。

最小写法：让返回顶部按钮和 sticky 标题跟随状态

下面的示例只演示关系，不代表所有目标浏览器都已启用该能力。返回顶部按钮使用 scrollable: top：当页面还能向顶部滚动时显示按钮；标题则使用 stuck: top，只在 sticky 标题卡住时改变后代内容的样式。

/* 让页面成为可命名的滚动状态查询容器 */
html {
  container-type: scroll-state;
  container-name: reader;
}

/* 基础样式先保证不支持查询的浏览器仍可阅读 */
.back-to-top {
  translate: 80px 0;
  transition: translate 0.2s ease;
}

/* 页面还能向顶部滚动时，显示返回顶部入口 */
@container reader scroll-state(scrollable: top) {
  .back-to-top {
    translate: 0 0;
  }
}

/* sticky 标题自身是查询容器，查询规则改变它的后代 */
.sticky-heading {
  position: sticky;
  top: 0;
  container-type: scroll-state;
  container-name: heading;
}

/* 标题卡住顶部时，仅改变标题内部内容的视觉状态 */
@container heading scroll-state(stuck: top) {
  .sticky-heading__title,
  .sticky-heading__meta {
    background: #e8f1ff;
    box-shadow: 0 4px 12px rgb(20 60 120 / 18%);
  }
}

代码中有两个容易混淆的点。第一，scrollable: top 表示仍存在向顶部滚动的空间，不等同于“当前已经滚动过”。第二，stuck: top 需要真实的 sticky 布局和滚动容器边界；如果父级的 overflow 或高度关系不成立，查询就没有可读的结构前提。

四类描述符怎样对应具体场景

• scrollable：适合显示“还有更多内容”的提示或返回顶部入口，条件关注可滚动方向。
• scrolled：适合按最近滚动方向切换上下提示条，条件关注最近一次滚动方向。
• snapped：只有滚动吸附结构成立时才有意义，先检查 scroll-snap-type 与吸附目标的关系。
• stuck：适合给吸顶标题增加阴影或背景，先确认元素真的设置了 position: sticky。

回归检查与迁移清单

/* 只在浏览器支持 scroll-state 容器查询时启用增强样式 */
@supports (container-type: scroll-state) {
  @container reader scroll-state(scrollable: top) {
    .back-to-top {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

/* 不支持时保留可见的基础入口，不把提示写成运行时错误 */
@supports not (container-type: scroll-state) {
  .back-to-top {
    translate: 0 0;
  }
}

迁移时按这四项回归即可：先确认目标元素是容器后代；再确认 container-type 和名称拼写一致；涉及 snapped 时检查吸附前提，涉及 stuck 时检查 sticky 的滚动边界；最后用 @supports 留下基础样式。兼容性不要凭感觉判断，应该以项目支持的浏览器版本和实际测试矩阵为准。

相关问题

scroll-state() 能直接替代所有 scroll 事件吗？不能。它适合声明式样式变化；如果要计算滚动距离、驱动业务逻辑或发起数据请求，仍需要脚本。

为什么 @container 写了却没有效果？优先检查查询容器是否声明了 container-type: scroll-state、名称是否一致，以及被改变的元素是否确实是容器后代。

snapped 和 stuck 可以混用吗？不可以。前者依赖 scroll snap，后者依赖 sticky 卡住状态，结构前提和适用场景不同。