overscroll-behavior: none 必须作用于实际滚动的容器（需显式高度+overflow-y: auto+内容真实溢出），body/html 上无效；ios旧版本需配合-webkit-overflow-scrolling: auto，css失效时用touchmove+preventdefault降级。
overscroll-behavior: none 是解决 iOS 橡皮筋导致布局错乱最直接有效的 CSS 方案，但必须作用在**实际滚动的容器上**，且该容器需满足显式高度 + overflow-y: auto（或 scroll）+ 内容真实溢出三个条件；写在 body 或 html 上完全无效。
为什么给 body 加 overscroll-behavior: none 没用
iOS Safari（直到 iOS 16.4）和多数旧版 WebView 对根元素的 overscroll 行为做了硬编码限制，overscroll-behavior 在 body 和 html 上被浏览器直接忽略。哪怕你写了 overscroll-behavior-y: none，下拉顶部照样拉出白边、松手回弹——这不是样式没加载，是根本没进渲染逻辑。
- 真正可生效的容器必须是：有明确高度（不能靠
min-height或内容撑开）、设置了overflow-y: auto或scroll、内部内容高度 > 容器高度 - 常见错误目标：
div#app、.modal、.list-container—— 如果它们只是包裹层，而滚动实际发生在子元素（如.content），那就要加在子元素上 - uni-app 中的
<uni-scroll-view></uni-scroll-view>，滚动发生在.uni-scroll-view-content，必须用:deep(.uni-scroll-view-content)穿透设置
嵌套滚动时为什么还会回弹
当内层滚动到底部停止后，继续拖拽会把事件冒泡到外层容器，触发外层的橡皮筋。这不是“没加对”，而是漏加了某一层。
- 每个独立滚动区域都得单独声明
overscroll-behavior: none，该属性不继承 - 例如弹窗里有个
scroll-view，弹窗本身又可滚动（比如长表单页），则.popup和其内部的.popup-content都要加 - 微信小程序同理：
<scroll-view></scroll-view>的滚动区在 shadow DOM 内部，仅设在组件标签上无效，必须通过自定义类或插槽内容容器加样式
旧版 iOS（12 及以下）为何仍会抖动
overscroll-behavior 在 iOS 12 及更早版本中支持不完整，仅靠它无法关闭系统级弹性滚动引擎。此时必须配合 -webkit-overflow-scrolling: auto。
-
-webkit-overflow-scrolling: touch会激活原生橡皮筋逻辑，且可能导致z-index失效、遮罩层穿透，应避免 - 若已有
touch值且无法修改，至少确保容器有固定高度（非height: 100vh这种可能计算不准的值），否则滚动可能直接失效 - 不要混用
touch-action: none—— 它会禁掉所有手势（包括点击、缩放），不是针对橡皮筋的解法
兼容性兜底：CSS 不生效时怎么办
部分微信内置 WebView、QQ 浏览器、iOS 15 及更早版本压根不识别 overscroll-behavior，此时只能 JS 降级。
- 监听
touchmove，仅当scrollTop === 0 && e.touches[0].clientY > 0（顶部触顶上拉）时调e.preventDefault() - 必须传
{ passive: false }，否则 iOS Safari 会忽略preventDefault - 只对特定类（如
.no-bounce）生效，避免误杀<input>、地图等需要原生手势的区域 - 别用
body { position: fixed }锁定滚动——它会破坏 focus、键盘弹起、SSR 渲染，是高危操作
真正容易被忽略的是：橡皮筋错乱往往不是单一容器的问题，而是滚动链路中任意一层缺失控制就全盘失效；另外，很多开发者以为加了 overflow: hidden 就能挡住橡皮筋，但它只裁剪视觉，不影响事件冒泡和系统级回弹——这点必须记牢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
