移动端橡皮筋回弹无法仅靠overscroll-behavior: none禁用，因其不作用于根元素；须结合html/body { overflow: hidden }、独立滚动容器及touchmove事件拦截（passive: false）方可可靠禁用。
移动端页面下拉时的橡皮筋回弹（即 overscroll bounce）无法仅靠 overscroll-behavior: none 全局禁用，它只作用于目标元素的滚动边界行为，不阻止根容器（ 或 ）本身的弹性滚动 —— 这是 WebKit 浏览器（iOS Safari、Chrome for iOS）的底层机制，CSS 无权覆盖。
为什么 overscroll-behavior: none 在移动端经常失效
该属性仅在元素自身可滚动且发生“溢出滚动”（即滚动到边界后继续拖拽）时起效，但移动端的橡皮筋效果发生在视口层级，由浏览器原生处理，绕过了 CSS 滚动上下文。即使给 或 设置 overscroll-behavior: none，WebKit 也会忽略 —— 它不支持在根元素上启用该属性。
常见错误现象包括：
- 页面内容未滚动到底部，下拉却触发整个视口回弹
- 使用
position: fixed遮罩层时，背后页面仍可被拖拽回弹 - 在
overflow: hidden的容器内嵌套滚动区域，外层仍透出回弹
真正有效的 CSS 组合：禁用根滚动 + 锁定 body 尺寸
必须同时满足三个条件才能压制 iOS 的默认回弹行为：
- 禁止
的默认滚动：body { overflow: hidden; height: 100vh; } - 确保
不参与滚动：html { overflow: hidden; height: 100%; } - 将实际滚动内容移入一个独立的、高度撑满的容器，并显式开启滚动：
.scroll-container { overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100vh; }
注意：-webkit-overflow-scrolling: touch 是 iOS Safari 中启用平滑惯性滚动的必要声明，缺失会导致滚动卡顿或失去惯性。
配合 JavaScript 防止 touchmove 默认行为（关键补丁）
仅靠 CSS 仍可能在快速下拉时漏掉一两帧回弹，尤其在遮罩弹层出现时。必须拦截 touchmove 事件并阻止默认行为：
document.body.addEventListener('touchmove', (e) => {
if (!e.target.closest('.scroll-container')) {
e.preventDefault();
}
}, { passive: false });
要点说明：
-
{ passive: false }是必需的，否则e.preventDefault()在现代 Chrome/iOS Safari 中无效 -
e.target.closest('.scroll-container')确保只放行真正需要滚动的区域，避免误锁内部列表 - 不要全局监听
document，否则会干扰<input>聚焦、<select></select>展开等原生交互
兼容性与风险提醒
overscroll-behavior 在 iOS Safari 16+ 才开始部分支持非根元素，但依然不能用于禁用视口回弹。目前唯一可靠路径是「CSS 根锁定 + JS touchmove 控制」双保险。
容易被忽略的点：
- 如果使用 Vue/React，动态添加/移除遮罩层时，必须同步 add/remove
touchmove监听器，否则残留监听器会持续阻止滚动 -
height: 100vh在 iOS Safari 中存在键盘唤起后视口高度塌缩问题，需监听resize或使用dvh（100dvh）替代（iOS 16.4+ 支持） - 某些 UI 库（如 Ionic、Framework7）已内置类似逻辑，重复实现可能导致冲突
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
