最优雅解法是直接加 overscroll-behavior: none，但仅对 ios 16.4+ 和现代 android 有效；老 ios 和微信/qq webview 不支持，需 js 降级处理。
直接加 overscroll-behavior: none 是最优雅的解法，但必须加在真正滚动的容器上，且仅对 iOS 16.4+ 和现代 Android 有效；老 iOS（如 iOS 12–15）和微信/ QQ 内置 WebView 完全不认它，此时没有“优雅”的纯 CSS 方案。
为什么 overscroll-behavior: none 加在 body 或 html 上没用
iOS Safari（直到 iOS 16.4）和多数旧版 Android WebView 对根元素有硬编码限制：overscroll-behavior 在 body 和 html 上被静默忽略。哪怕你写了 overscroll-behavior-y: none，下拉顶部照样拉出白边。
它只对满足以下条件的**显式滚动容器**生效：
- 设置了
height或max-height（不能是min-height或依赖内容撑开） - 设置了
overflow-y: auto或scroll（hidden不行，那根本不可滚） - 内容真实溢出，产生可滚动区域
- 是实际发生滚动的那个元素——比如
.list-container、.modal-content、uni-app 中的.uni-scroll-view-content
overscroll-behavior: none 与 contain 的关键区别
none 是彻底切断：既阻止滚动链（不穿透到父级），也禁掉本层自身的橡皮筋反馈；contain 只阻断链路，但保留本层弹性回弹（iOS 上仍会拉出一点白边）。
如果你的目标是让 iOS 表现和 Android 一致（严格卡在边界内、无任何拉伸），就用 none。
若只想禁顶部回弹、保留底部下拉刷新，可用 overscroll-behavior-y: contain —— 注意这不是 none，它仍允许本层回弹，且在老 iOS 中支持度略好，但依然不解决橡皮筋本身。
兼容性差时 JS 降级的实操要点
iOS 15 及更早、微信内置 WebView、QQ 浏览器等，压根不识别 overscroll-behavior。此时只能 JS 降级，但必须克制：
- 监听
touchmove，仅当scrollTop === 0 && e.touches[0].clientY > 0（顶部触顶上拉）时调e.preventDefault() - 务必加
{ passive: false }，否则 iOS Safari 会忽略preventDefault - 只对特定类（如
.no-bounce）生效，避免误杀输入框、地图等需要原生手势的区域 - 别用
body { position: fixed }锁滚动——它会破坏 focus 状态、键盘弹起逻辑，SSR 场景下极易出错
容易被忽略的嵌套与穿透问题
嵌套滚动时，内外两层都要加 overscroll-behavior: none；否则内层停止后事件会继续冒泡到外层触发回弹。
如果用了 position: fixed 全屏遮罩，记得把 overscroll-behavior: none 加在遮罩**内部的滚动区**，而非遮罩本身——否则点透到下面页面仍可能触发回弹。
真正难处理的不是样式本身，而是滚动容器的定位是否准确、是否被框架封装隐藏（如 uni-app 的 ::deep(.uni-scroll-view-content)）、以及老 iOS 下只能妥协接受部分回弹或改交互逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
