overscroll-behavior写在body上完全无效，因为ios safari等webkit浏览器明确忽略根元素（html/body）上的该声明；它仅对设置了overflow且内容真实溢出的非根滚动容器（如.modal-content）生效。
overscroll-behavior 为什么写在 body 上完全无效
因为 iOS Safari 和当前所有 WebKit 浏览器（包括 Chrome for iOS）**明确忽略** html 和 body 元素上的 overscroll-behavior 声明。你在 DevTools 里看到它显示为灰色、not supported 或直接不出现，不是 CSS 写错了，是浏览器压根不解析。
真正起效的位置必须是「内容真实溢出 + 显式可滚动」的容器，比如：.modal-content、#list-container、.uni-scroll-view-content（uni-app）、.scroll-view__content（微信小程序内部节点）。
- 该容器必须有
overflow-y: auto或scroll（hidden不行） - 必须有明确高度（
height: 100vh、max-height: 400px等），不能靠内容撑开 - 内容必须真实溢出——如果内容高度 ≤ 容器高度，浏览器不认为它可滚动，属性自然不触发
contain 和 none 到底该选哪个
overscroll-behavior: contain 是多数场景更安全的选择；none 更激进，但容易连带破坏其他行为。
contain 表示：本层允许轻微回弹（比如弹窗内列表拉到底还有弹性），但滚动事件不会冒泡到父级——这意味着背景页不会被拖动，键盘唤起时输入框仍能自动滚动定位，下拉刷新库也能正常监听 scroll 位置。
none 表示：本层彻底禁掉回弹，且阻止所有滚动事件传播。但它可能让 input 获焦后浏览器自动滚动失效，或导致某些依赖 scroll 链的第三方组件（如 vue-virtual-scroller）行为异常。
- 模态框、下拉菜单、弹层内长列表 → 优先用
overscroll-behavior: contain - 全屏游戏画布、编辑器、不允许任何滚动干扰的场景 → 才考虑
none - 横向轮播图只需约束 X 轴：
overscroll-behavior-x: contain; overscroll-behavior-y: auto
为什么加了样式还是触发橡皮筋？先查这三件事
即使 CSS 写对了，也可能因底层渲染条件未满足而静默失效。
- 检查目标元素是否被
transform（如translateZ(0)）、will-change或contain: paint包裹——这些会创建独立滚动上下文，绕过overscroll-behavior - 确认没有在父级用了
position: fixed却忘了给子级滚动区单独设样式（常见于遮罩弹窗） - 打开 Safari 开发者工具，选中该元素 → 查看 Computed 样式 → 确认
overscroll-behavior是否显示为生效值（不是灰色/禁用状态）
另外注意：嵌套滚动结构（如 .modal > .list > .item）中，每一层独立可滚动的容器都得单独声明，否则内层停住后事件继续冒泡到外层，照样触发回弹。
老 iOS（iOS 16.4 之前）根本不用指望它
overscroll-behavior 在 iOS 16.4+ 才开始支持。在此之前的所有版本（包括大量仍在使用的 iPhone SE 第二代、iPhone 8 等设备），该属性完全被忽略——不是 bug，是浏览器根本不实现。
此时仅靠 CSS 无法可靠禁用橡皮筋。可行的补救措施只有：
- 给
body加overflow: hidden; height: 100vh;，再把实际内容放进一个height: 100vh; overflow-y: auto;的容器里 - 配合 JS 拦截：
document.body.addEventListener('touchmove', e => { if (!e.target.closest('.scroll-container')) e.preventDefault(); }, { passive: false }) - 但必须加白名单（
closest判断），否则会锁死input滚动、select展开等原生交互
最常被忽略的一点：很多页面的“橡皮筋”其实不是子容器引起的，而是 body 自己在滚动——检查是否内容高度不足一屏，导致 body 成了实际滚动体。这时候修容器没用，得先 fix 布局高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
