这是浏览器默认的滚动链（scroll chaining）行为：当局部滚动容器触底后，剩余滚动量会自动移交至最近可滚动祖先（如body或document），W3C规范明确支持该机制以保障连续滚动体验。
局部滚动容器触底后继续滑动，为什么整个页面跟着滚？
这不是 bug，是浏览器默认的 scroll chaining（滚动链）行为：当一个可滚动元素（比如 .modal-scrollable）已滚动到顶部或底部边界，用户持续拖拽时，剩余滚动量会自动“移交”给最近的、向上可滚动的祖先容器——通常是 document 或 body。W3C 规范明确支持该机制，目的是保持连续滚动体验。
常见错误认知是“加了 overflow-y: scroll 就万事大吉”，但只要没阻断滚动链，就一定会穿透。尤其在 iOS 上，touchmove 事件不显式拦截 + 滚动容器未设 overscroll-behavior: contain，穿透几乎必然发生。
- 检查滚动容器是否设置了
overscroll-behavior: contain（推荐首选） - 确认父级容器（如
#app、body）没有意外获得overflow: auto/scroll - 避免滚动容器内嵌套
position: fixed元素——它可能破坏滚动上下文，间接激活滚动链
为什么 body.style.overflow = 'hidden' 在 iOS 上完全失效？
iOS Safari 的滚动由 viewport 级别控制，body 只是普通文档流元素，对其设置 overflow: hidden 不影响 viewport 滚动行为。你看到的“背景还能拖”，不是 JS 没执行，是浏览器压根不响应这个样式指令。
真机生效必须组合三要素：
立即学习“前端免费学习笔记（深入）”；
- 提前记录
document.scrollingElement.scrollTop - 给
body加position: fixed; top: -scrollTop - 同步处理应用根节点（如
#app）的overflow和position，否则 Vue/React 应用里滚动仍穿透
漏掉任意一项，iOS 上都会回滚或穿透。
如何安全拦截 touchmove 而不封死弹窗内滚动？
无差别在遮罩层上写 el.addEventListener('touchmove', e => e.preventDefault(), { passive: false }) 是最典型误操作：它会把弹窗内部所有 touchmove（包括列表、文本域）一并阻止，导致用户根本滑不动内容。
正确做法是条件拦截：
- 监听遮罩层或
document的touchmove，但只对e.target不属于弹窗可滚动区域时调用preventDefault() - 为弹窗内可滚动子元素（如
.modal-content）单独绑定touchmove，且不调用preventDefault() -
{ passive: false }必须显式传入，漏写等于白写；iOS 可能静默忽略 passive 为 true 的监听器
overscroll-behavior: contain 是什么，为什么它应是第一选择？
这是现代浏览器原生提供的滚动链中断方案，无需 JS、不干扰事件流、不影响性能。设在局部滚动容器上，就能彻底阻止滚动越过其边界后传递给祖先。
兼容性已足够落地（Chrome 63+、Firefox 59+、Safari 16.4+、iOS Safari 16.4+）：
- 对弹窗内滚动区加
overscroll-behavior: contain - 对
body或根容器加overscroll-behavior: none，防止下拉刷新等副作用 - 注意：它无法修复已因 DOM 结构异常（如未闭合标签）导致的滚动错位——得先用 DevTools 查
depth值，确保结构干净
真正难的从来不是加哪行 CSS，而是 DOM 层级过深或结构被浏览器悄悄重写后，overscroll-behavior 会直接失效——这点容易被忽略。
