直接阻止移动端默认滚动需显式设置 passive: false，仅在竖直滑动时调用 preventDefault()，并叠加 overscroll-behavior: contain 和 body 固定定位等多层防护。

直接阻止移动端页面默认滚动，关键在于理解事件机制中“被动监听”（passive listeners）的限制，并针对性地选择兼容方案。单纯调用 e.preventDefault() 在现代浏览器（如 Chrome 56+、Safari、Android WebView）中可能无效甚至报错，因为 touchstart 和 touchmove 默认以 passive: true 方式注册——此时浏览器会提前决定是否允许滚动，不等待 JS 执行完再判断。

必须显式声明 passive: false 才能阻止默认滚动

若要用 touchmove 阻止滚动，必须在 addEventListener 中明确传入 { passive: false }。否则即使写了 e.preventDefault()，浏览器也会忽略：

• ✅ 正确写法（可生效）：
  document.body.addEventListener('touchmove', e => e.preventDefault(), { passive: false });
• ❌ 错误写法（静默失效）：
  document.body.addEventListener('touchmove', e => e.preventDefault());（缺少 passive: false）

仅拦截垂直方向滚动，避免影响横向操作

全量禁用 touchmove 会同时阻断轮播图、滑块、拖拽等横向交互。更合理的方式是按滑动方向动态判断：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 记录 touchstart 的初始坐标（pageX/pageY）
• 在 touchmove 中计算 Δx 和 Δy，若 |Δy| > |Δx|（偏向竖直），才调用 e.preventDefault()
• 这样既防止页面上下滚，又保留左右滑动能力

配合 CSS overscroll-behavior 提升健壮性

仅靠 JS 容易漏掉惯性滚动或下拉刷新等系统级行为。建议叠加 CSS 防御：

立即学习“Java免费学习笔记（深入）”；

• 给 html, body 添加：
  overscroll-behavior: contain;（禁用下拉刷新和滚动穿透）
• 同时设置：
  height: 100%; overflow: hidden;（作为视觉兜底）
• 注意：iOS Safari 对 overscroll-behavior 支持较晚（iOS 16+），需结合 JS 回退

弹窗/蒙层场景推荐组合策略

当打开模态框时，应同时启用多层防护，避免底部页面滚动：

• JS 层：绑定 touchmove 到 document 或 body，带 { passive: false }
• CSS 层：为 body 添加 position: fixed; top: -${scrollTop}px; width: 100%;，防止 iOS 弹窗后回弹到顶部
• 状态层：用布尔变量标记锁定状态，关闭弹窗时及时移除监听器并恢复 body 样式