overscroll-behavior: contain 必须作用于显式创建滚动上下文的容器（如设 max-height 和 overflow-y: auto 的内部 div），而非弹窗外壳或 body；ios safari 需 js 禁用 body 滚动兜底，且优先选 contain 而非 none。
直接给弹窗容器加 overscroll-behavior: contain 没用——表格、modal-card、position: fixed 层本身不是滚动上下文，浏览器根本不认。
为什么 overscroll-behavior 写在弹窗上无效
浏览器只对「真实发生滚动」的块级容器应用该属性。弹窗元素（如 div.modal）若没设 overflow-y: auto 且内容未溢出，它就不是滚动源；而 position: fixed 或 display: flex 容器默认不创建新的滚动上下文，属性直接被忽略。
-
modal元素本身没有设置max-height和overflow-y: auto→ 不构成滚动区域，overscroll-behavior静默失效 - 给
body或html加该属性 → 作用对象错误，它管的是根滚动，不是弹窗内部 - 用
transform、will-change包裹弹窗容器 → iOS Safari 15–16 会跳过 overscroll 判断，导致穿透复现
真正起效的滚动容器必须显式包裹
必须把可滚动内容（比如弹窗里的长列表或详情区）放进一个独立的、带尺寸约束的 div，并在这个 div 上设置全部滚动相关样式。
- 容器需有明确高度限制：
max-height: 70vh或height: 400px（不能只靠100vh） - 必须设
overflow-y: auto（scroll也可，但auto更安全） -
overscroll-behavior: contain必须落在这个容器上，不是弹窗外壳，也不是body - 若容器是
display: flex，记得加min-height: 0，否则子元素可能撑高导致overflow失效
移动端 iOS Safari 的穿透兜底方案
即使 CSS 全写对，在 iOS Safari 真机上仍可能穿透——它会因祖先元素的 transform、viewport 缩放或第三方 UI 框架的包裹层跳过 overscroll-behavior。
- 弹窗打开时，用 JS 临时禁用 body 滚动：
document.body.style.overflow = 'hidden' - 同时保存当前
scrollY，关闭弹窗后恢复：window.scrollTo(0, savedScrollY) - 避免只加
is-clipped类却漏掉position: fixed的兼容处理（部分 Android 机型需额外设body { position: fixed; top: -scrollY }） - 不要依赖
touchmove.preventDefault()—— 它在 iOS 上对原生滚动无效，还可能引发手势冲突
contain 还是 none？别乱选
表格类弹窗、后台数据详情页优先用 contain：它保留 iOS 橡皮筋和 Android glow 效果，用户拉到顶/底能感知边界；而 none 是硬截断，容易误判为卡死。
-
overscroll-behavior: contain在 Safari 15–16 中偶有失效，但比none更少触发touchmove卡顿 - 横向宽表格拖拽过头需防穿透？写成
overscroll-behavior: none contain（x 轴在前，y 轴在后） - 仅当弹窗用于监控大屏等绝对静默场景时，才考虑
none；日常业务中contain是更自然的选择
最易被忽略的一点：滚动穿透不是事件冒泡问题，无法靠 stopPropagation 解决；它源于滚动上下文归属错误——你得先让浏览器承认“这里真的在滚动”，它才肯听你的话。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
