必须设在真正可滚动的子元素上，如.modal__content；该元素需有max-height和overflow-y:auto，且父级不能含transform等干扰样式，contain比none更推荐，因它保留本地回弹但阻断事件上传。
overscroll-behavior 必须设在真正可滚动的子元素上
它只对有 overflow-y: auto（或 scroll）且内容实际溢出的元素生效。弹窗容器（如 .modal）通常只是 position: fixed 的壳子，没滚动能力，加了 overscroll-behavior: contain 也白搭。
常见错误写法：.modal { overscroll-behavior: contain; } → 浏览器直接忽略，iOS 上尤其明显。
- 正确目标：弹窗里那个带
max-height和overflow-y: auto的内容区，比如.modal__content或.modal-body - 该元素必须有明确高度约束（如
max-height: 80vh），否则无法触发滚动条，属性自然不介入 - 父级不能有
transform、will-change或backface-visibility—— 这些会创建新层叠上下文，打断滚动链，导致 Safari 15–16 完全失效
contain 和 none 的实际差异在哪
overscroll-behavior: contain 是弹窗场景的默认推荐值；none 更激进，但副作用明显。
-
contain：允许当前元素自身回弹（iOS 橡皮筋、Android glow），仅阻断事件向上传播 —— 用户手感自然，键盘唤起后自动滚动也不受影响 -
none：连本地回弹都禁掉，滚到顶/底就硬停；旧版 iOS（touchmove 导致拖拽卡顿 - 只需防纵向穿透（比如轮播图里防误拖），用
overscroll-behavior-y: contain，横向保持默认行为
为什么写了却没效果？几个静默失效点
这个属性不报错、不警告，写错就等于没写。最常被忽略的不是语法，而是滚动链是否成立。
- 内容没溢出：高度不足，没滚动条 →
overscroll-behavior根本不触发（它只管“滚到边界时”，不管“滚不滚得动”） - Flex/Grid 布局中子元素撑高，但父容器没设
min-height: 0或overflow: hidden→ 高度计算异常，滚动行为不可控 - 用了
backdrop-filter做毛玻璃遮罩？注意：遮罩层（如.overlay）本身才是滚动容器，overscroll-behavior得加在它身上，不是加在内部的.glass-pane -
dialog元素默认是overscroll-behavior: auto，必须显式覆盖
iOS 15–16 的兜底必须手动做
哪怕 CSS 写对了，在 iOS 15.x 和部分安卓 WebView 中仍可能穿透。这时候不能靠猜，得用精准 JS 补漏。
- 监听
touchmove时，必须用e.target.closest('.modal__content')判断是否在允许滚动的区域外滑动 - 绑定事件要加
{ passive: false }，否则preventDefault()在 iOS Safari 15+ 被静默忽略 - 手动保存并恢复
window.scrollY，否则页面会突然跳动 —— 这一步漏掉，体验比不加还差 - 别无差别给
body加overflow: hidden，它会丢失滚动位置、触发重排，iOS 上还容易闪屏
真正难的从来不是写一行 overscroll-behavior: contain，而是确认哪一层在滚动、哪一层该被控制、以及要不要为极少数老设备多写二十行 JS 来保底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
