因为 overscroll-behavior 仅对实际可滚动容器生效，而 ios safari 等浏览器忽略 html/body 根元素上的该属性；必须作用于带 overflow-y: auto 的具体滚动区（如 .modal__content）才有效。
为什么 overscroll-behavior 写在 body 上经常没用
因为 iOS Safari 和多数现代浏览器会忽略作用于 html 或 body 的 overscroll-behavior，哪怕你写了 body { overscroll-behavior: none; }，computed 样式里也常显示为灰色禁用状态。根本原因是：根元素的 overscroll 行为由 WebView 层直接控制，CSS 无法干预。真正生效的必须是「实际发生滚动的容器」——比如一个 div#app、.modal-content 或带 overflow-y: auto 的列表包裹层。
常见错误包括：
- 给
body加了overflow: hidden后再设overscroll-behavior：此时body已不可滚动，属性自然失效 - 用
position: fixed遮罩层时，只控制遮罩本身，却忘了遮罩内部的可滚动区域（如弹窗里的长列表），导致手指划到底部仍透出背景回弹 - 嵌套滚动结构中（如 modal > scrollable-list > item），只在最外层设了
contain，但内层未显式声明，滚动穿透依旧发生
该用 none 还是 contain？关键看是否允许局部回弹
overscroll-behavior: none 和 overscroll-behavior: contain 表现差异很小，但语义和兼容性不同：
-
none：彻底禁用当前容器的 overscroll 行为，不触发回弹，也不传播滚动事件（比如下拉刷新、历史滑动）；iOS 16.4+ / Chrome 63+ / Firefox 59+ 支持 -
contain：保留本容器内的回弹（如弹窗内列表拉到底部仍有轻微弹性），但阻止滚动事件向父级传递；兼容性略好，iOS 13+ 就支持 - 若只需约束纵向（如轮播图防左右误拖），用
overscroll-behavior-y: contain，横向保持auto
绝大多数场景推荐 contain：它更保守，不会意外禁用键盘唤起时的自动滚动定位，也不会干扰某些依赖滚动传播的第三方组件（如下拉刷新库）。
老 iOS（iOS 12 及更早）怎么兜底
这些版本完全不识别 overscroll-behavior，只能靠 JavaScript 拦截 + 位置锁定，但必须加白名单，否则会锁死所有滚动：
- 监听
document.body的touchmove，但只在非可滚动目标上preventDefault() - 用
e.target.closest('.scroll-container')判断是否命中允许滚动的区域（如.list、.modal-scroll） - 必须传
{ passive: false }，否则preventDefault()在 iOS Safari 15+ 和 Chrome 中被静默忽略 - 配合
body { position: fixed; top: -${window.scrollY}px; }防止拦截后页面跳动，且记得在恢复时重置scrollY和焦点状态
手写容易漏掉 <input> 聚焦、<select></select> 展开等原生交互，建议直接用 disable-scroll 这类轻量库，它内部已处理 target 判断和状态还原。
为什么 overflow: hidden 和 touch-action: none 都不是正解
overflow: hidden 只裁剪内容、隐藏滚动条，对 overscroll 行为零影响；哪怕 body 高度远超视口，加了它之后手指划到顶/底照样拉出白边。而 touch-action: none 是暴力方案：它直接禁用整个元素的所有触摸行为，连正常滑动、缩放、点击都会失效，根本不可用。
真正要解决的是「允许滚动，但不让滚动溢出触发回弹」，这正是 overscroll-behavior 的设计边界。它的限制也很明确：不继承、不作用于根元素、不控制滚动物理参数（如阻尼、加速度）。复杂点在于——每个需要独立控制的滚动容器，都得单独声明，哪怕只是个 div 套了 max-height 和 overflow-y: auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
