overscroll-behavior 必须设在真实可滚动的子元素（如 .modal__content）上，而非弹窗容器本身；需满足有高度约束、overflow-y: auto、内容溢出且祖先无 transform 等干扰样式，ios 15–16 还需 touchmove + passive: false + scrolly 保存兜底。
必须设在真正可滚动的子元素上，不是弹窗容器本身；否则属性静默失效，iOS 尤其明显。
为什么 overscroll-behavior 写对了却没反应
这个属性不报错、不警告，写错就等于没写。它只对浏览器实际认定的滚动容器生效，而不是“看起来能滚”的元素。
-
.modal（position: fixed容器）加overscroll-behavior: contain→ 浏览器直接忽略，因为它通常没overflow、没内容溢出 - 子元素没设
max-height或height，导致内容未溢出 → 没滚动条，属性根本不介入 - 父级用了
transform、will-change或backface-visibility→ Safari 15–16 会破坏滚动链识别，属性失效 - Flex/Grid 布局中，父容器没设
min-height: 0或overflow: hidden→ 高度计算异常，滚动行为不可控
该加在哪？必须是 .modal__content 这类真实滚动区
弹窗容器（如 .modal）只是定位壳子，滚动实际发生在内部内容区。只有它同时满足以下条件，overscroll-behavior 才起作用：
- 有明确高度约束：比如
max-height: 80vh或height: 400px - 启用了纵向滚动：
overflow-y: auto（scroll也行，但auto更推荐） - 内容真实溢出，能拉出滚动条
- 样式干净：祖先节点避免
transform等创建新层叠上下文的属性
正确示例：
.modal__content {<br> max-height: 70vh;<br> overflow-y: auto;<br> overscroll-behavior: contain;<br>}
contain 还是 none？别默认写 none
二者都阻断向上传播，区别只在本地反馈，选错会影响手感：
-
contain：允许 iOS 弹性回弹、Android glow 效果，仅切断事件冒泡 → 推荐作为弹窗默认值，键盘唤起后自动滚动也不受影响 -
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+ 被静默忽略 - 手动保存并恢复
window.scrollY，否则页面会突然跳动 —— 这一步漏掉，体验比不加还差 - 别无差别给
body加overflow: hidden，它会丢失滚动位置、触发重排，iOS 上还容易闪屏
真正难的从来不是写一行 overscroll-behavior: contain，而是确认滚动链成立、高度可控、祖先无干扰样式，以及旧版 Safari 的兜底逻辑是否完整覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
