overscroll-behavior: contain 是解决 ios 橡皮筋引发外层滚动冲突的首选方案，但必须作用于实际可滚动子容器（如 .modal__content），不能写在 body 或 html 上；因 webkit 明确不支持根元素该属性，devtools 中显示为灰色禁用，系统将视口级橡皮筋锁死在底层，css 无法干预。
overscroll-behavior: contain 是解决 iOS 橡皮筋回弹引发外层滚动冲突的首选方案，但必须作用于实际可滚动子容器，不能写在 body 或 html 上。
为什么给 body 加 overscroll-behavior:none 完全没反应
不是代码写错，是 WebKit（iOS Safari、Chrome for iOS）明确不支持在根元素上启用该属性。DevTools 里能看到样式被标记为灰色禁用状态，computed 值为空。系统把视口层级的橡皮筋行为锁死在 WebView 底层，CSS 无权干预。
真正起效的位置只能是：一个设置了 overflow-y: auto（或 scroll）、有明确高度（如 height: 100vh）、内容真实溢出的容器，比如：
-
.content、#app、.modal__content - uni-app 中的
::deep(.uni-scroll-view-content) - 微信小程序
<scroll-view></scroll-view>渲染出的内部节点
contain 和 none 的实际区别与选型
overscroll-behavior: contain 不是“弱化版 none”，而是更安全的默认选择：
-
contain：允许本容器内拉到底部时有轻微弹性（视觉友好），但阻止事件向父级冒泡——背后页面不会被拖拽回弹，键盘唤起时input自动滚动定位也不受影响 -
none：彻底禁掉本层所有 overscroll 反馈，包括下拉刷新提示、历史滑动等；只适合全屏遮罩、游戏画布等强隔离场景 - 别写成
no-scroll或disable——合法值只有auto、contain、none
嵌套滚动结构中为什么加了还是穿透回弹
即使样式写对了，也可能因底层渲染条件未满足而失效：
- 容器没设
overflow-y: auto（或scroll）——hidden或未声明overflow都不算“可滚动” - 父级用了
position: fixed，但子容器没设显式高度，Safari 不认为它构成独立滚动上下文 - 容器或其祖先有
transform、will-change、contain: paint——这些会创建新层叠上下文，绕过overscroll-behavior控制链 - 嵌套滚动结构（如
modal > list > item）中，每一层独立可滚动的容器都得单独加，漏一层就可能穿透
iOS 16.4 之前版本根本无法用 CSS 解决
老 iOS（iOS 16.4 之前）完全不识别 overscroll-behavior，JS 也无法完美模拟原生禁止效果。强行用 touchmove + preventDefault() 容易锁死所有滚动、破坏惯性、影响性能。
能落地的妥协方案只有两个：
- 对关键操作（如下拉刷新）改用阈值检测，不依赖“拉到顶”的精确位置
- 用
scrollend事件配合scrollTop判断，手动重置局部容器滚动位置（注意会打断自然动效）
最常被忽略的是：contain 在 iOS 13+ 就已支持，而 none 要求 iOS 16.4+；若目标用户含大量旧设备，优先用 contain 并接受轻微弹性，比硬上 none 导致降级失效更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
