overscroll-behavior: none仅对实际滚动容器生效，写在body或html上无效，因webkit硬编码忽略根元素该属性；必须作用于满足overflow-y:auto、明确高度及内容真实溢出的子容器（如#app、.modal-content），ios 16.4前完全不支持。
直接加 overscroll-behavior: none 就能禁掉橡皮筋，但只对实际滚动的容器生效——写在 body 或 html 上完全无效，iOS Safari 会直接忽略。
为什么写在 body 上没用
不是你漏写了样式，是 WebKit（包括 iOS Safari 和 Chrome for iOS）硬编码限制：根元素的 overscroll 行为由 WebView 底层控制，CSS 无权干预。body { overscroll-behavior: none; } 在 DevTools 里会显示为灰色禁用状态，computed 值为空。真正起效的必须是那个「内容真实溢出 + 显式可滚动」的子容器。
-
div#app、.modal-content、.list-container这类包裹内容的容器才符合条件 - 它必须同时满足：
overflow-y: auto（或scroll）、有明确高度（如height: 100vh）、内容真实溢出（不能靠min-height或内容撑开） - 若用
position: fixed做弹层，要加在弹层内部的滚动区（如.modal-content），而非弹层遮罩本身
contain 和 none 怎么选
绝大多数场景该用 contain，不是因为它“不够强”，而是更安全：
-
overscroll-behavior: contain：阻止事件向父级冒泡（背景页不回弹），但保留本层轻微弹性（如弹窗内列表拉到底仍有视觉反馈），键盘唤起时 input 自动滚动定位也不受影响 -
overscroll-behavior: none：彻底禁掉本层所有 overscroll 反馈（含下拉刷新提示、历史滑动等），适合全屏遮罩、游戏画布等强隔离场景 - 别写成
no-scroll或disable—— 合法值只有auto、contain、none
老 iOS（iOS 16.4 之前）怎么兜底
这些版本完全不识别 overscroll-behavior，CSS 方案形同虚设。JS 降级也无法完美模拟，强行用 touchmove + preventDefault() 容易锁死滚动、破坏惯性、误杀输入框和地图。
- 必须加
{ passive: false }，否则 iOS Safari 15+ 会静默忽略preventDefault() - 只对特定类（如
.no-bounce）生效，避免全局拦截 - 监听
scrollTop === 0 && e.touches[0].clientY > 0（顶部触顶上拉）时才调e.preventDefault() - 别用
body { position: fixed }锁定滚动——它会破坏 focus 状态、键盘逻辑，SSR 下极易出错
嵌套滚动和框架里怎么设
每一层独立可滚动的容器都得单独加，漏一层就可能穿透：
- uni-app 中需穿透到
::deep(.uni-scroll-view-content) - 微信小程序
<scroll-view></scroll-view>要作用于其内部渲染节点，不能只设在组件标签上 - 横向轮播图只需约束 X 轴：
overscroll-behavior-x: contain; overscroll-behavior-y: auto - 容器或其祖先有
transform、will-change、contain: paint时，会创建新层叠上下文，绕过overscroll-behavior控制链
最常被忽略的是：overflow: hidden 对橡皮筋完全无效——它只裁剪内容、隐藏滚动条，不影响 overscroll 行为。哪怕整个页面设了 body { overflow: hidden; }，手指划到顶/底照样拉出白边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
