overscroll-behavior: none 仅对创建独立滚动上下文的容器生效，需满足：有明确高度、overflow-y 为 auto/scroll、内容真实溢出；body/html 上无效因浏览器硬编码锁定根元素行为。
直接在滚动容器上写 overscroll-behavior: none 就能禁掉 iOS 下拉橡皮筋，但必须满足三个硬性条件：该容器有明确高度、设置了 overflow-y: auto（或 scroll）、内容真实溢出；写在 body 或 html 上完全无效。
为什么写在 body 上没用
iOS Safari（直到 iOS 16.4+）和旧版 Android WebView 对根元素的 overscroll 行为做了硬编码锁定，overscroll-behavior 在 body 和 html 上会被浏览器直接忽略——你在 DevTools 里看到该样式是灰色禁用状态，computed 值也为空。它只对「实际创建了独立滚动上下文」的容器生效，比如一个 div#app、.modal-content 或 .list-container。
必须满足的三个渲染前提
即使 CSS 写对了，Safari 也可能不触发该属性，因为它依赖底层滚动坐标系是否真正建立：
-
height（或max-height）必须是明确值，不能是min-height、fit-content或依赖内容撑开 -
overflow-y必须是auto或scroll，hidden不行（不可滚动，属性无意义） - 内容高度必须真实超过容器高度，否则浏览器不认为它是“可滚动容器”，
overscroll-behavior不参与计算
嵌套滚动和框架里的写法
uni-app、微信小程序等封装组件中，overscroll-behavior 必须穿透到内部滚动节点：
- uni-app 的
<uni-scroll-view></uni-scroll-view>：用::deep(.uni-scroll-view-content) { overscroll-behavior: none; } - 微信小程序的
<scroll-view></scroll-view>：需作用于其内部渲染的滚动区域，不是组件标签本身 - 弹窗内含长列表：给弹窗内部的滚动区（如
.popup__list）加，而不是弹窗遮罩层（.popup-overlay） - 嵌套滚动结构（如 modal > list > item）：每一层独立可滚动的容器都得单独声明，漏一层就会穿透
兼容老 iOS 的降级方案
iOS 15 及更早、微信内置 WebView 等环境根本不识别 overscroll-behavior，此时只能 JS 降级，但要注意边界：
- 监听
touchmove时必须传{ passive: false }，否则e.preventDefault()在 iOS Safari 中被静默忽略 - 只拦截特定区域，用
e.target.closest('.no-bounce')判断，避免锁死输入框、地图等需要原生手势的控件 - 不要全局
document.body.addEventListener('touchmove', e => e.preventDefault())—— 它会破坏键盘唤起逻辑和 focus 滚动定位 - 别用
body { position: fixed }锁屏，SSR 渲染易错，且会导致页面跳动、焦点丢失
最容易被忽略的一点：很多开发者以为加了 overscroll-behavior: none 就万事大吉，却没检查容器是否真的“可滚动”——比如用了 height: 100% 但父级高度未定义，或者内容刚好卡在容器高度临界点，导致 Safari 根本不启用滚动上下文。先确认 computed 样式里该容器的 overflow-y 是 active 状态，再调这个属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
