overscroll-behavior 写在 body 或 html 上无效，因 ios safari 仅支持作用于具有独立滚动上下文的容器（即显式设置 height/max-height、overflow-y: auto 且内容真实溢出的块级元素），而 body/html 不满足该条件。
overscroll-behavior 写在 body 或 html 上为什么无效
因为 iOS Safari（包括最新版）根本不会解析 overscroll-behavior 在 body 或 html 元素上的声明。它只对「有独立滚动上下文」的容器生效——也就是设置了 overflow-y: auto（或 scroll）且内容真实溢出的块级元素。即使你写了 body { overscroll-behavior: none; }，Computed Styles 里也会显示为灰色禁用状态。
常见错误包括：
- 给
body加了overflow: hidden后再设overscroll-behavior：此时body已不可滚动，属性自然失效 - 用
position: fixed遮罩弹窗，只控制遮罩层样式，却忘了内部长列表才是滚动主体 - 嵌套滚动结构中（如
.modal > .list > .item），只在外层加了contain，内层未显式声明，事件仍会冒泡触发回弹
目标容器必须同时满足三个硬性条件
哪怕样式写对了，Safari 也可能不识别该容器为有效滚动上下文。它是否创建了独立的滚动坐标系，取决于布局与渲染层双重约束。
必须同时满足：
-
height或max-height（如height: 100vh），不能靠flex: 1或min-height模糊撑高 -
overflow-y: auto（或scroll），overflow: hidden不行，overflow: visible也不行 - 子元素总高度 > 容器高度，即内容真实溢出；否则浏览器判为“不可滚动”，
overscroll-behavior直接被忽略
容易被绕过的失效点：
- 父级用了
transform（如translateZ(0)）、will-change或contain: paint：这些会隔离渲染层，导致子容器的overscroll-behavior失效 - 容器用了
position: fixed但没设显式高度：Safari 可能跳过滚动链控制逻辑 - 在 uni-app 中，需穿透到
::deep(.uni-scroll-view-content)；微信小程序同理，要作用于scroll-view内部真实滚动节点
contain 还是 none？别乱选
语义和影响完全不同，不是“强度”差异。
overscroll-behavior: contain：
- 允许本层轻微弹性（比如弹窗内列表拉到底仍有回弹），但阻止事件向上冒泡
- iOS 13+ 就支持，兼容性更好
- 不会干扰
input获焦时浏览器自动滚动定位，也不会破坏下拉刷新库依赖的滚动传播
overscroll-behavior: none：
- 彻底禁本层回弹 + 禁传播，iOS 16.4+ 才支持
- 可能让键盘唤起、历史滑动等原生行为失效
- 横向轮播图只需约束 X 轴：
overscroll-behavior-x: contain; overscroll-behavior-y: auto
绝大多数场景推荐 contain —— 它更保守，也更安全。
老 iOS（iOS 15 及更早）根本没法靠 CSS 解决
这些版本完全不识别 overscroll-behavior，不是你写错了，是浏览器根本不认。JS 方案也得小心踩坑：
- 必须用
{ passive: false }，否则e.preventDefault()在 iOS Safari 15+ 和 Chrome 中静默失败 - 不能全局监听
document.body的touchmove，否则会锁死input、select等原生交互 - 只拦截非可滚动区域：
if (!e.target.closest('.scroll-container')) { e.preventDefault(); } - 配合
body { position: fixed; top: -${window.scrollY}px; }防止页面跳动，且记得在弹层关闭后恢复
真正容易被忽略的是：很多页面的“橡皮筋”根本不是子容器引起的，而是 body 自己在滚动——检查内容高度是否撑不满一屏，如果是，修容器没用，得先 fix 布局高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
