overscroll-behavior: none 仅对 Chrome 63+、Firefox 59+、Safari 16.4+（iOS 16.4+）有效，老 iOS 完全不支持；必须作用于实际滚动容器（如 #app 或 .modal-content），写在 html 或 body 上无效；contain 阻止穿透但保留本层回弹，none 彻底禁用；overflow: hidden 不影响橡皮筋效果；弹窗需结合 overscroll-behavior: contain 与 JS 锁定页面位置防穿透；无完美 JS 降级方案，老 iOS 应重构交互避开强依赖边界状态。
直接用 overscroll-behavior: none 可禁掉滚动到边界时的橡皮筋回弹，但只对 Chrome 63+、Firefox 59+、Safari 16.4+（即 iOS 16.4+）生效；老 iOS 完全不认这个属性，不能指望它兜底。
为什么写在 html 或 body 上没用
移动端浏览器对根元素有特殊处理：overscroll-behavior 在 html 和 body 上被忽略。必须作用于实际发生滚动的容器上——比如一个包裹全部内容的 <div id="app">，或弹窗内部的可滚动区域。
- 错误写法：
body { overscroll-behavior: none; }→ 无效 - 正确写法：
#app { overscroll-behavior: none; }或.modal-content { overscroll-behavior: contain; } -
contain比none温和：阻止穿透，但保留本层弹性效果（如 iOS 橡皮筋）；none更彻底，连本层回弹也关掉
overscroll-behavior 和 overflow: hidden 的关系
overflow: hidden 完全不影响滚动边界行为。它只裁剪内容、隐藏滚动条，但手指划到顶/底照样拉出白边。
- 设了
body { overflow: hidden; }还是会回弹 → 正常，不是你漏写了什么 - 真正控制“是否允许滚动溢出”的，只有
overscroll-behavior，它管的是 scroll chaining 的权限分配 - 别混用
-webkit-overflow-scrolling: touch：它已弃用，且和overscroll-behavior无关
弹窗场景下滚动穿透怎么防
弹窗内滚动到底后继续滑，背后页面跟着动——这是典型的滚动链未切断。仅靠 overscroll-behavior 不够，因为它的作用域仅限“边界溢出”，不干预正常滚动过程中的事件传递。
立即学习“前端免费学习笔记（深入）”；
- 必须给弹窗自身的滚动容器加
overscroll-behavior: contain（如.modal-body） - 同时要防止背景滚动：iOS 下需配合 JS 锁定
html位置（position: fixed; top: -${scrollY}px），单靠 CSS 无法解决惯性滚动和键盘唤起导致的位移 - 如果弹窗用了
position: fixed全屏遮罩，记得检查其内部可滚动子元素是否也设置了overscroll-behavior，否则点透仍可能触发底层回弹
兼容性差时能做什么
没有 JS fallback 能完美模拟原生 overscroll-behavior: none 的效果。iOS 16.4 之前的所有设备（包括大量仍在使用的 iPhone）根本不响应该属性。
- 降级方案一：把关键交互（如下拉刷新）改成阈值检测（如监听
scroll时scrollTop <= 10就触发），不依赖精确的“拉到顶”状态 - 降级方案二：对局部容器监听
scrollend，结合scrollTop判断并手动重置（el.scrollTop = 0），但会打断自然动效，用户感知明显 - 别写全局
touchmove + preventDefault()：容易误杀弹窗内轮播、光标拖动等手势，且必须配{ passive: false }才生效
真正难处理的不是“怎么写 CSS”，而是老 iOS 设备上滚动边界行为根本不可控——这时候得接受它存在，或者重构交互逻辑，避开对边界状态的强依赖。
