前端都踩过这个坑：弹窗里滚动到底，背景页跟着一起滚——Firefox 157 用一个关键字把这件事彻底扳过来了

配过带聊天记录弹窗或嵌套滚动侧边栏的前端都知道这个场景：弹窗里的列表滚到底了，手指一滑，背景页面也跟着一起滚走了。浏览器管这个叫滚动链（scroll chaining），以前的应对方案只有三个选项：

• auto：滚动链正常触发，弹性效果也有——弹窗滚动到底时背景页跟着走
• contain：阻止滚动链，但弹性效果也一起没了——用户感觉”卡住”
• none：连弹性效果也禁掉，滚动直接停在边界——有时候体验更差

这道题没有好答案：你只能在”卡住”和”一起滚走”之间二选一。

Firefox 157（2026年9月29日）给 overscroll-behavior 新增了第四个关键字：chain。

chain 的行为：滚动到边界后，滚动事件无缝传递到父级可滚动容器，但不触发弹性效果。这正是以前需要十几行 JavaScript scroll-lock 逻辑才能模拟的行为。

/* 旧写法：contain 阻止了滚动链，但用户感觉"卡住" */
.chat-modal-body {
  height: 320px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* Firefox 157+：chain 让滚动自然流到背景，同时抑制弹性效果 */
.chat-modal-body {
  height: 320px;
  overflow-y: auto;
  overscroll-behavior-y: chain;
}

实际效果：用户在聊天区滚到底后，手指继续向下，背景页面开始滚动，而不是”卡在底部弹不回来”。Chrome/Edge/Safari 早已支持 chain 或等效行为，Firefox 157 是最后一个补完的主流浏览器。

多面板应用同样受益：

.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  height: 100vh;
}

/* 侧边栏用 chain，滚动自然流到主内容区 */
.sidebar-nav {
  overflow-y: auto;
  overscroll-behavior: chain;
}

/* 主内容区同理 */
.main-content {
  overflow-y: auto;
  overscroll-behavior: chain;
}

如果需要渐进增强，在 Firefox 157 之前可以用 @supports 做特性检测：

.chat-modal-body {
  overflow-y: auto;
  overscroll-behavior-y: contain; /* fallback */
}

@supports (overscroll-behavior: chain) {
  .chat-modal-body {
    overscroll-behavior-y: chain; /* Firefox 157+ 升级体验 */
  }
}

下一步：找一个你的项目中带嵌套可滚动区的弹窗或侧边栏，把 overscroll-behavior 值从 contain 换成 chain，实测感受差异。如果弹窗内容比屏幕短，这个改动对移动端体验的提升最明显——用户不再感觉”被卡住”。

参考来源：Firefox 157 release notes（web-standards.dev）、MDN CSS Overscroll Behavior Module Level 1 规范、zudo-css-wisdom 开发者踩坑分析