overscroll-behavior必须设在真实可滚动的子元素上，如.modal__content，且需满足max-height、overflow-y:auto及内容真实溢出；contain保留本地回弹但阻断事件上传，none则彻底禁用所有overscroll反馈。
overscroll-behavior 必须设在真实滚动容器上
它只对浏览器实际认定的滚动容器生效，不是“看起来能滚”的元素。常见错误是直接写在 .modal（position: fixed 容器）上——该元素通常没 overflow、没内容溢出，属性被静默忽略，iOS 尤其明显。
正确目标必须是内部那个真正可滚动的子元素，比如 .modal__content 或 .modal-body，且需同时满足：
- 有明确高度约束：
max-height: 70vh或height: 400px - 启用纵向滚动：
overflow-y: auto（推荐）或overflow-y: scroll - 内容真实溢出——否则没滚动条，属性根本不介入
- 祖先节点避免
transform、will-change、backface-visibility，否则 Safari 15–16 会破坏滚动链识别
contain 和 none 的区别不是“能不能防穿透”，而是“手感”
二者都阻断向上传播，但本地反馈差异显著：
-
overscroll-behavior: contain：允许 iOS 弹性回弹、Android glow 效果，仅切断事件冒泡 → 推荐作为弹窗默认值，键盘唤起后自动滚动也不受影响 -
overscroll-behavior: none：连本地回弹都禁掉，滚到顶/底硬停 → 适合地图、画布等需彻底隔离的场景，但在轮播图里误用会导致横向滑动卡顿 -
overscroll-behavior-y: contain可细粒度控制，比如保留横向轮播弹性，只防纵向穿透
iOS 15–16 必须手动兜底，光靠 CSS 不够
哪怕 CSS 全写对，在 iOS 15.x 和部分安卓 WebView 中仍可能穿透。JS 补漏关键点极易遗漏：
- 监听
touchmove时，用e.target.closest('.modal__content')判断是否在允许滚动的区域外滑动 - 绑定事件必须加
{ passive: false }，否则preventDefault()在 iOS Safari 15+ 被静默忽略 - 不要无差别阻止所有
touchmove，否则遮罩层内可滚动区域（如长列表）会失灵
容易被忽略的根本前提：它不控制“能不能滚动”，只干预“滚到头之后怎么办”
overscroll-behavior 不影响正常滚动，只响应「滚动到边界」这一瞬间的行为。如果内容没溢出、容器没设 overflow、或者滚动链被 transform 断开，再怎么写 none 都只是摆设。
真正要检查的，是滚动链是否成立：从当前元素向上，是否有可滚动的祖先？该元素本身是否被浏览器识别为滚动容器？这些比属性值本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
