直接阻止移动端默认滚动需显式设置 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 防御：
- 给
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 样式
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
