聊天窗口滚到头了，背景页面跟着一起滚——这事儿你忍了八年，今天 Firefox 157 用一个关键字把它原生化了

聊天窗口滚到头了，背景页面跟着一起滚——这事儿你忍了八年，今天 Firefox 157 用一个关键字把它原生化了。

嵌套滚动区域（modal 里套评论框、侧边栏里套目录树）是前端最常见的交互场景之一，也是最容易引发用户困惑的场景。滚动穿透这件事，CSS 一直有两档：要么全开（auto），要么全关（contain）——没有中间选项。

contain 会把滚动锁死在当前容器内，同时还会顺带关掉浏览器的橡皮筋弹性效果和下拉刷新手势。有时候你就是想保留弹性、只阻止向上传播。auto 倒是完全恢复了浏览器默认行为，但一滚就”串台”，体验直接崩。

chain 这个关键字，就是来填这个空白的：它允许你只阻止滚动穿透到祖先容器，同时完整保留当前容器的弹性行为和下拉刷新。三者的区别可以浓缩成一张表：

你真正想要的行为，其实就是 chain。

举几个真实场景：聊天窗口里嵌套了一个很长的历史记录列表，你希望用户在列表内滚动到底/顶时不要触发外层 modal 的滚动——overscroll-behavior-y: chain 正好满足这个需求，同时完全不破坏橡皮筋体验。全屏 tab 切换轮播组件，每个 tab 内有自己的纵向内容区，你希望横向滑动切换 tab，纵向滚完内容后不触发外层页面滚动——overscroll-behavior: contain 会更合适，因为你在 tab 内完全不想要滚动链。

但如果你的产品逻辑恰好要求”可以感受到弹性，但不要把页面带跑”，chain 就是唯一的标准方案。

Firefox 157 Beta（2026-09-14 发布）已正式支持这个关键字，Chrome 从 155 开始也跟进支持。Can I Use 数据显示全球 96%+ 浏览器覆盖率，生产环境可直接使用。

/* 阻止滚动穿透，同时保留弹性效果 */
.chat-history {
  height: 300px;
  overflow-y: auto;
  overscroll-behavior-y: chain;
}

/* 渐进增强：chain 不支持的浏览器回退到 contain */
@supports (overscroll-behavior-y: chain) {
  .chat-history {
    overscroll-behavior-y: chain;
  }
}

实际落地时有个细节需要注意：overscroll-behavior 是作用于滚动容器的，不是作用于内容的。所以一定要确认你的目标元素本身是 scroll container（即有 overflow 相关属性且实际产生了滚动区域）。没有产生溢出的元素设这个属性是无效的。

Firefox 157 稳定版预计 9 月 29 日发布。如果你现在就要用，可以先把 @supports 渐进增强写上——支持 chain 的浏览器会优先使用，不支持的会自动回退到 contain，体验降级但不会坏。