overscroll-behavior写在body或html上无效，因ios safari（至ios 16.4+）及旧版android webview硬编码锁定根元素overscroll行为，该属性被直接忽略；必须作用于满足overflow-y:auto、明确高度且内容真实溢出的实际滚动子容器（如.modal__content）才生效。
overscroll-behavior 写在 body 或 html 上为什么没用
因为 iOS Safari（直到 iOS 16.4+）和多数旧版 Android WebView 对根元素的 overscroll 行为做了硬编码锁定，overscroll-behavior 在 html 和 body 上会被浏览器直接忽略。DevTools 中该样式显示为灰色禁用状态，computed 值为空。这不是你写错了，是底层限制——视口级橡皮筋行为无法被 CSS 干预。
必须加在哪个容器上才生效
要起作用，overscroll-behavior 必须作用于「实际发生滚动」的子容器，且该容器需同时满足三个条件：
-
overflow-y: auto或overflow-y: scroll（hidden不行） - 有明确高度（如
height: 100vh、max-height: 500px，不能靠min-height或内容撑开） - 内容真实溢出（即
scrollHeight > clientHeight）
常见有效目标：.modal__content、#list-container、.uni-scroll-view-content（uni-app 需用 ::deep() 穿透）、微信小程序 <scroll-view></scroll-view> 渲染出的内部节点。
contain 和 none 到底选哪个
绝大多数场景该用 overscroll-behavior: contain，不是因为它“不够强”，而是更安全：
-
contain：阻止滚动事件向父级冒泡（背后页面不抖），但保留本容器内轻微弹性（iOS 拉到底仍有视觉反馈），键盘唤起时 input 自动滚动定位不受影响 -
none：彻底禁掉本层所有 overscroll 反馈（包括下拉刷新提示、历史滑动），只适合全屏遮罩、游戏画布等强隔离场景 - 别写成
no-scroll或disable—— 合法值只有auto、contain、none
若只需约束纵向（比如轮播图防误拖），可用 overscroll-behavior-y: contain; overscroll-behavior-x: auto。
老 iOS（iOS 16.4 之前）怎么兜底
这些版本完全不识别 overscroll-behavior，没有完美 CSS fallback。JS 降级也得克制：
- 监听
touchmove时必须传{ passive: false }，否则preventDefault()在 iOS Safari 15+ 被静默忽略 - 只对特定类（如
.no-bounce）生效，避免误杀<input>、地图等依赖原生手势的区域 - 不要全局拦截
document.body，否则会锁死所有滚动、破坏惯性、影响性能 - 别用
body { position: fixed }锁定滚动——它会破坏 focus 状态和键盘弹起逻辑
真正难处理的是嵌套滚动结构：modal > list > item，每一层独立可滚动的容器都得单独加 overscroll-behavior，漏一层就可能穿透。这点最容易被忽略，也最难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
