CSS阻止移动端页面弹性拖拽，设置body的overscroll-behavior

移动端页面在内容不足时出现的弹性拖拽（overscroll）并非 Bug，而是浏览器默认行为，尤其在 iOS Safari 和 Android Chrome 中明显；本文详解如何通过现代 CSS 属性 `overscroll-behavior: none` 精准禁用 body 的弹性回弹，既保留正常滚动能力，又杜绝页面晃动，同时兼顾旧版 iOS 的兼容方案——结合 `preventDefault` 与 `position: fixed` 动态锁定滚动位置，并指出 `overflow: hidden` 等粗暴手段的严重缺陷，帮助开发者真正理解并优雅解决这一高频痛点。

移动端页面被拖拽的根本原因

这不是 bug，是浏览器默认行为：当内容高度不足、手指在 body 或可滚动容器上滑动时，WebKit（iOS Safari）和 Chromium（Android Chrome）会触发“弹性 overscroll”，表现为页面整体上下晃动。关键触发条件是：滚动容器没有真实滚动内容，但用户做了滑动手势。

最常见场景：body 高度小于视口，或弹窗遮罩层（position: fixed）下层的 body 仍可响应滑动。

用 overscroll-behavior 精准拦截

overscroll-behavior 是唯一标准方案，它控制滚动边界行为，不干扰正常滚动逻辑。设在 body 上即可阻止整个页面的弹性拖拽：

body {
  overscroll-behavior: none;
}

注意三点：

• none 同时禁用上下两个方向；若只要禁用下拉刷新（保留上拉回弹），用 overscroll-behavior-y: contain
• 必须作用于实际滚动容器——如果用 overflow: hidden 压制 body，overscroll-behavior 会失效，因为此时 body 已不可滚动
• iOS Safari 13+ 和 Chrome 73+ 支持，旧版需降级处理（见下一条）

兼容 iOS 12 及更早版本

老 iOS 不支持 overscroll-behavior，只能靠阻断默认事件 + 锁定 body 滚动位置：

• 监听 touchmove 事件，对 body 或根容器调用 event.preventDefault()
• 配合 body { position: fixed; top: -${scrollTop}px; width: 100%; } 防止跳动
• 但此法有副作用：会同时禁用所有内部可滚动区域（如弹窗里的列表），必须加条件判断，只在非可滚动元素上拦截
• 推荐用库如 disable-scroll，它内部做了 target 判断，比手写更稳

为什么 overflow: hidden 不可靠

很多人直接给 body 加 overflow: hidden，结果发现：

• 页面失去滚动能力，哪怕内容超长也卡死
• 键盘弹出后，焦点元素可能被遮挡且无法滚动到可视区
• 部分 Android 机型会强制重置该样式，导致失效
• 它治标不治本：没解决 overscroll 行为本身，只是砍掉了滚动通道

真正要的是「允许滚动，但不传递 overscroll」，这正是 overscroll-behavior 的设计目标。

复杂点在于：它不继承，必须显式设置到每个需要控制的滚动容器上；比如弹窗里有个 scrollable-list，又不想它下拉触发父级刷新，就得单独给它加 overscroll-behavior: contain。

到这里，我们也就讲完了《CSS阻止移动端页面弹性拖拽，设置body的overscroll-behavior》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！