冗长的静态页面常常叠加文档级滚动条、带 overflow:auto 的目录岛，以及不能把动量传到背后页面、也不能抢走用户橡皮筋反馈的对话框。若缺少显式控制，WebKit 的橡皮筋会把最内层滚动器的过滚动链接到祖先，造成背景误滚、误点转化按钮与交互指标噪声。到 2026 年，应在正确的滚动容器上组合 overscroll-behavior: contain，并与 scrollbar-gutter 稳定槽位、固定顶栏下的 scroll-padding 形成同一套叙事，让滚动链、滚动条预留与哈希对齐在 Safari 与 iOS 上口径一致。
向 MacHTML 租用 Mac mini（约 每天 16.9 美元）复现这些交互，能捕获纯桌面 Chromium 流水线难以稳定覆盖的 iOS 动量缺陷。
滚动链与浏览器默认
滚动链指嵌套滚动器到达范围边界后，额外的滚轮或触摸增量会继续传给祖先。营销站点最讨厌这一点：用户只想滚动价目表，却把首屏视频滚出视口。桌面 Safari 与 iOS WebKit 默认都会链接；Chromium 亦然，因此修一次可惠及所有常青内核。
正确修复不是给 body 在弹窗打开时粗暴 overflow: hidden——那会破坏 iOS 背景锁模式并损害无障碍。应在弹窗可滚动面板上设置 overscroll-behavior-y: contain；若横向走马灯不应把侧向过滚变成历史手势，则对水平轴使用 overscroll-behavior-x: none。
弹窗主体上的 contain
把 containment 施加在消费者实际拖动滚动条的那个元素上：
.modal__body {
max-height: min(70vh, 640px);
overflow: auto;
overscroll-behavior: contain;
}contain 阻止链式滚动，但仍允许弹窗内部改变滚动位置。若还存在横向滑块，可在 iOS 上叠加 touch-action: pan-y，否则水平拖拽会与竖向弹窗滚动冲突。
使用原生 <dialog> 时，遮罩不会继承工具类——若焦点可在对话框元素与内层滚动器之间移动，应在这两处重复 overscroll 规则。
何时 none 比 contain 更安全
当必须在 Android 混合 WebView 上禁用下拉刷新，或分析图表的水平滑动绝不能触发返回前进手势时，使用 overscroll-behavior: none。none 更激进，也可能压制有用的过滚动提示，因此默认仍优先 contain。
地图与画布仪表板有时需要在双轴 none，以保持拖拽手势局部而不被浏览器解释为后退滑屏。
auto 与断点上的显式重置
宽屏时目录可能不滚动；窄屏才变成 overflow:auto。用媒体查询仅在嵌套滚动器存在时启用 overscroll：
@media (max-width: 900px) {
.toc { overflow: auto; overscroll-behavior: contain; max-height: 40vh; }
}布局变化后忘记移除 containment 是常见回归：桌面验收通过，而移动端用户在目录折叠后失去向文档链式滚动。
iOS Safari、touch-action 与被动监听
iOS 仍将动量滚动与手势识别耦合。若第三方脚本安装了被动 wheel 监听却调用 preventDefault，仅靠 CSS 救不了——要审计分析片段。只有当浏览器端到端拥有滚动时，CSS containment 才最可靠。
请在 一百二十赫兹 高刷真机上测试：更小滚动容器的减速曲线更短，链式过滚在体感上更“猛”，即便物理规律与六十赫兹实验室相同。
无障碍：焦点陷阱与可滚动性
弹窗陷阱焦点时，应保证滚动区域在 Tab 序中可达，或按设计系统支持方向键滚动。读屏用户虽看不见橡皮筋渗漏，但若链式滚动移动底层页面，可访问名称的屏幕位置仍会跳变。
尊重 prefers-reduced-motion：它虽不关闭 overscroll-behavior，但可配合更小的最大高度，避免为关闭动效的用户制造过长滚动深度。
书面记录哪个元素承担 role="dialog"、哪个子元素在打开时 tabindex="0" 以承接编程焦点。质检应验证：焦点在对话框主体内部时，滚轮事件不会滚动背后页面，即便主体没有可见焦点环。
性能、合成层与 will-change 陷阱
overscroll-behavior 本身便宜，但团队常把它与 backdrop-filter、同栈上的 will-change: transform 叠加，迫使移动 Safari 额外合成层并吃内存。用 WebKit 图层面板测量：若弹窗提升在旧款平板上造成 五百一十二兆字节 级显存尖峰，先简化阴影再归咎 overscroll。
避免给每张卡片全局 will-change: scroll-position；它会在离屏时也预留资源。仅在弹窗打开期间对活动层做提升。
若同页使用 CSS 滚动驱动动画，要确认文档时间线不会与拒绝链式滚动的嵌套容器打架——有时必须把动画目标移到内层滚动器才能看见效果。
打印样式与 PDF 导出
市场团队仍从静态页打印合规 PDF。在 @media print 把 overscroll 重置为 auto，避免模拟 WebKit 的 PDF 引擎在弹窗最大高度处裁切内容。显式隐藏对话框遮罩并恢复文档 overflow。
无头 Chromium 导出 PDF 对 overscroll-behavior 的遵循不如交互式 Safari 一致；打印专用 CSS 可写 .modal { position: static; max-height: none; overflow: visible; overscroll-behavior: auto; } 以保证法律段落不被截断。
引入嵌套滚动 containment 后对比 PDF 页数快照——页数异常增长往往意味着走马灯在打印时不再折叠。
决策表：contain、none、auto
| 界面模式 | 推荐 | 备注 |
|---|---|---|
| 弹窗法律文本 | contain | 阻止首屏漂移 |
| 嵌套数据栅格 | 栅格 contain，文档 auto | 未聚焦栅格时仍可滚页面 |
| 可滑走马灯且有历史手势风险 | 该轴 none | Android WebView 另测 |
| 全屏地图 | none | 确认缩放手势仍可用 |
发布前现场清单
在支持的最低 iOS 版本与最新 Safari 技术预览各跑一遍清单，以捕获 WebKit 在小版本间收紧滚动链语义的回归。若市场坚持对话框背后全屏视频英雄区，请录屏供设计评审。
- 打开弹窗，猛滑到末尾，确认背后页面不移动。
- 在读屏焦点位于弹窗内时重复。
- 从 1280 像素 缩到 320 像素，确认媒体查询切换 containment。
- 测量 CLS：配合 scrollbar-gutter 避免滚动条出现时的宽度跳动。
- 在启用 scroll-padding 时哈希跳转到页脚锚点；确认嵌套目录的过滚不会抢走完成跳转的动量。
打磨静态 HTML 意味着拥有每个滚动容器的物理规律，而非只关心最外层文档。在设计质检模板加一条遥测：弹窗打开后记录是否有滚轮事件冒泡到 document；Playwright 可在 二百 次猛滑中断言计数恒为零。
向 MacHTML 以约 每天 16.9 美元 租用 Mac mini，可在与设计师相同的原生 Safari 与 Apple 芯片环境里复现嵌套滚动器、弹窗焦点陷阱与高刷时序。