应将 overscroll-behavior: none 直接作用于实际滚动的 div 容器，而非 body 或 html；因 ios safari（ios 16.4 前）及旧版 android webview 硬编码限制，该属性在根元素上被忽略，仅对显式设置高度与 overflow-y: auto/scroll 且内容真实溢出的容器生效。
直接给滚动容器加 overscroll-behavior: none，不是 body，不是 html，而是那个实际在滚的 div。
为什么写在 body 或 html 上没用
因为 iOS Safari（直到 iOS 16.4+）和部分旧版 Android WebView 对根元素的 overscroll 行为有硬编码限制，overscroll-behavior 在 body 和 html 上被完全忽略。哪怕你写了 overscroll-behavior-y: none，下拉顶部照样拉出白边。
必须作用于一个明确的、可滚动的容器上——比如：div#app、.modal-content、.list-container。
- 该元素需有显式高度 +
overflow-y: auto（或scroll），且内容真实溢出 - 不能是
overflow: hidden—— 那样它根本不可滚动，属性自然不生效 - 若用
position: fixed做弹层，记得把overscroll-behavior: none加在弹层内部的滚动区，而非弹层本身
overscroll-behavior: none 和 contain 的区别
none 是最彻底的：既阻止滚动链（不穿透到父级），也禁掉本元素自身的橡皮筋反馈；contain 只阻断滚动链，但保留本层的弹性回弹（比如 iOS 上仍会拉出一点白边）。
如果你的目标是让 iOS 表现和 Android 一致（严格卡在边界内、无任何拉伸），就用 none。
-
overscroll-behavior: none≡overscroll-behavior-x: none; overscroll-behavior-y: none; - 若只想禁顶部回弹、保留底部刷新，用
overscroll-behavior-y: contain（注意：这不是none，它仍允许本层回弹） -
contain在老 iOS（如 iOS 12–15）中支持度略好，但依然不解决橡皮筋本身
兼容性差时怎么兜底
iOS 15 及更早、部分微信内置 WebView、QQ 浏览器等，压根不识别 overscroll-behavior。这时候没有完美 CSS 方案，只能 JS 降级：
- 监听
touchmove，仅当scrollTop === 0 && e.touches[0].clientY > 0（顶部触顶上拉）时调e.preventDefault() - 务必加
{ passive: false }，否则 iOS Safari 会忽略preventDefault - 避免全局拦截：只对特定类（如
.no-bounce）生效，防止误杀输入框、地图等需要原生手势的区域 - 不要用
body { position: fixed }锁定滚动——它会破坏 focus 状态、键盘弹起逻辑，且 SSR 场景下极易出错
别碰的坑：那些看似相关但其实无效的操作
overflow: hidden 对橡皮筋完全无效——它只裁剪内容、隐藏滚动条，不影响系统级手势响应。
touch-action: none 也不能直接替代：它会禁掉所有手势（包括点击、缩放），除非你同时加 touch-action: manipulation 给可交互子元素，而且它只在“真正可滚动”的容器上才起效。
更别提已废弃的 -webkit-overflow-scrolling: touch，它和 overscroll 行为无关，且现代 iOS 已弃用。
真正的控制权只在 overscroll-behavior 手里，只是它必须用对地方、用对时机——而最容易被忽略的，就是「它从来不管根滚动」这件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
