overscroll-behavior必须作用于实际滚动容器，不能写在body或html上；需满足overflow-y:auto、明确高度、内容真实溢出三条件，ios 16.4前需js降级。
overscroll-behavior 必须作用于实际滚动容器，不能写在 body 或 html 上
直接给 body 或 html 加 overscroll-behavior: none 在 iOS Safari（包括 iOS 16.4 之前）和多数旧版 WebView 中完全无效——DevTools 里该声明会显示为灰色禁用状态，computed 值为空。这不是你漏写了样式，而是 WebKit 硬编码限制：根元素的 overscroll 行为由底层 WebView 控制，CSS 无权干预。
真正起效的位置必须是那个「内容真实溢出 + 显式可滚动」的子容器，比如：
-
#app、.modal-content、.list-container - uni-app 中的
::deep(.uni-scroll-view-content) - 微信小程序
scroll-view内部渲染节点（非组件标签本身）
它必须同时满足三个条件：overflow-y: auto（或 scroll）、有明确高度（如 height: 100vh，不能是 min-height 或靠内容撑开）、内容真实溢出（否则浏览器不认为它可滚动）。
contain 和 none 的区别直接影响交互行为
选 contain 还是 none 不是“强度”问题，而是行为取舍：
-
overscroll-behavior: contain：阻止滚动事件向父级冒泡（背景页不回弹），但保留本层轻微弹性（如弹窗内列表拉到底仍有视觉反馈），input获焦后自动滚动定位不受影响 -
overscroll-behavior: none：彻底禁掉本层所有 overscroll 反馈（含下拉刷新提示、历史滑动等），适合全屏遮罩、游戏画布等强隔离场景 - 下拉刷新类需求优先用
contain；若页面本身不允许任何边界拉伸（如 H5 游戏），才考虑none
别写成 no-scroll 或 disable——合法值只有 auto、contain、none。
iOS 16.4 之前版本无法用 CSS 解决
截至 2026 年，iOS 16.4 仍是 overscroll-behavior 的兼容分水岭。iOS 16.3 及更早、微信内置 WebView、QQ 浏览器等，压根不识别该属性，CSS 方案形同虚设。
JS 降级只能缓解，无法完美模拟：
- 监听
touchmove，仅当scrollTop === 0 && e.touches[0].clientY > 0（顶部触顶上拉）时调e.preventDefault() - 必须传
{ passive: false }，否则 iOS Safari 15+ 会静默忽略preventDefault() - 只对特定类（如
.no-bounce）生效，避免误杀input、地图、轮播图等需要原生手势的区域 - 绝对不要用
body { position: fixed }锁定滚动——它会破坏 focus 状态、键盘逻辑，SSR 下极易出错
嵌套滚动结构必须逐层设置
每个独立可滚动的容器都得单独加 overscroll-behavior，漏一层就可能穿透。例如弹窗内嵌长列表：
- 弹窗遮罩层（
.modal-overlay）本身不可滚动 → 不需要加 - 弹窗内容区（
.modal-content）设置了overflow-y: auto→ 必须加 - 若内容区内部还有
.inner-list也启用了滚动 → 它也得加
另外注意：overscroll-behavior 不继承；transform、will-change、contain: paint 等属性可能创建新层叠上下文，绕过控制链；横向轮播图建议用 overscroll-behavior-x: contain; overscroll-behavior-y: auto。
最常被忽略的是“容器是否被浏览器识别为有效滚动上下文”——这不光看 CSS，还取决于布局属性和渲染时机。即使样式写对了，也可能因 height 计算未完成或 overflow 条件未满足而失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
