应将 overscroll-behavior: contain 设置在弹窗内实际可滚动的子元素（如 .modal__content）上，而非 .modal 容器或 body；该元素需有明确高度、overflow-y: auto 且无干扰其滚动上下文的父级样式。
直接给弹窗内部的可滚动区域加 overscroll-behavior: contain，不是弹窗容器本身，也不是 body。 其他写法大概率无效，尤其在 iOS 上。
为什么写在 .modal（position: fixed 容器）上没用
因为 overscroll-behavior 只对「实际发生滚动的元素」生效，而 .modal 本身通常没有 overflow，不可滚动。浏览器会忽略它上面的该属性。
- 真正滚动的是它内部的
.modal__content或.modal-body这类有overflow-y: auto的子元素 - 如果弹窗内容不长、没触发滚动条，那这个属性根本不会起作用
- 常见错误：给遮罩层（
.modal-overlay）设了contain，但忘了里面那个列表容器
正确设置的三个必要条件
缺一不可，否则在 Safari 或部分 Android 机型上仍会穿透：
- 目标元素必须有明确高度（如
max-height: 80vh）和overflow-y: auto（或scroll） - 在该元素上显式声明
overscroll-behavior: contain（推荐，比none更安全） - 确保它父级没有意外的
overflow: hidden或transform，否则可能干扰滚动上下文
contain 和 none 怎么选
绝大多数弹窗场景应优先用 contain：
立即学习“前端免费学习笔记（深入）”；
-
contain：允许弹窗内列表拉到底部有轻微回弹反馈，但不向上传播滚动事件——用户感知自然，第三方组件（如键盘唤起后的自动滚动）也不受影响 -
none：彻底禁掉回弹和下拉刷新等所有 overscroll 行为，iOS 16.4+ / Chrome 63+ 才完全支持；老 iOS 会直接忽略，且可能破坏某些依赖边界反馈的交互 - 若只需防纵向穿透（比如轮播图里防误拖），用
overscroll-behavior-y: contain，横向保持默认
旧版 iOS（iOS 12 及更早）兜底很麻烦
这些版本完全不识别 overscroll-behavior，JS 拦截容易误伤正常滚动：
- 不能无差别监听
document.body的touchmove并preventDefault() - 必须用
e.target.closest('.modal__content')精准判断是否在允许滚动的区域外滑动 - 配合
{ passive: false }，否则preventDefault()在 iOS Safari 15+ 被静默忽略 - 还要手动保存并恢复
scrollY，防止页面跳动——这一步漏掉，体验反而更差
真正难的不是加一行 CSS，而是确认哪一层在滚动、哪一层该被控制、以及要不要为极少数老设备多写二十行 JS 来保底线。很多项目卡在这里，不是不会写，是不敢删掉那堆兼容代码。
