解决移动端弹性滚动拉出白边的唯一标准方案是overscroll-behavior，它直接干预浏览器overscroll传播链；background-attachment: fixed在iOS上基本无效，无法修复该问题。
移动端弹性滚动（overscroll）本身不产生空白，background-attachment 也无法修复它。这是个常见误解：iOS Safari 的“橡皮筋”效果是原生滚动行为，与背景定位无关；而 background-attachment: fixed 在移动端多数情况下被忽略或强制降级为 scroll，根本不起作用。
为什么 background-attachment fixed 在 iOS 上基本无效
从 iOS 15 开始，Safari 明确禁用 background-attachment: fixed（包括 local），除非元素同时满足：transform: translateZ(0) + will-change: transform + 父容器有明确 height 或 overflow: hidden。即便强行启用，它只影响背景图的视差位移，完全不阻止 overscroll 拉出的空白区域。
- 真机测试中，
background-attachment: fixed在或上 100% 不生效 - 即使在局部容器中生效，拉伸空白仍存在——因为 overscroll 是视口层行为，不是渲染层问题
- 该属性还会触发额外的合成层，增加内存开销，且在 Android WebView 中兼容性更差
真正该用 overscroll-behavior 来截断弹性
解决“滑动到顶/底时拉出白边”的唯一标准方案是 overscroll-behavior，它直接干预浏览器的 overscroll 传播链：
-
overscroll-behavior: contain—— 阻止当前容器溢出时触发父级滚动（如弹窗内滚动到底，不连带页面滚动） -
overscroll-behavior: none—— 完全禁用弹性效果（iOS 16+、Chrome 73+、Firefox 119+ 支持） - 必须作用于可滚动容器本身，例如
.modal-content、.list-scroller，而非body
示例：
.scroller {
height: 300px;
overflow-y: auto;
overscroll-behavior: contain;
}
body 层级的 overscroll 白边只能靠 viewport + 重置 margin
如果你看到的是整个页面上下/左右拉出空白（非局部容器），问题不在 overscroll-behavior，而在：
-
默认margin: 8px—— 缩放时被放大，形成左右可滚动空白 -
viewport缺少width=device-width, initial-scale=1.0，导致视口计算错误 - 未设置
html { height: 100% }+body { min-height: 100vh }，小内容页底部留白
修复只需三行：
body {
margin: 0;
padding: 0;
min-height: 100vh;
}
html {
height: 100%;
}
@media (pointer: coarse) {
body {
overscroll-behavior-y: none;
}
}
复杂点在于：iOS 旧版本（overscroll-behavior，此时只能靠 touchstart + preventDefault() 拦截，但会破坏原生滚动惯性。别试图用 background-attachment 绕路——它既不解决问题，还埋下性能和兼容性隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
