iOS移动设备中如何阻止屏幕滚动与页面刷新？

一、核心问题分析 #

直接全局调用e.preventDefault()会过于粗暴，且iOS中touchmove事件默认是passive模式，直接阻止可能失效。需要精准识别滑动手势，只拦截触发页面滚动、下拉刷新或横向拖拽的动作。

二、分步解决方案 #

1. 精准拦截目标手势

通过记录触摸起始位置，计算滑动方向和距离，针对性阻止默认行为：

let startX, startY;

// 触摸开始时记录初始坐标
window.addEventListener('touchstart', function(e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
}, { passive: false });

// 触摸移动时判断手势并拦截
window.addEventListener('touchmove', function(e) {
  if (!startX || !startY) return;
  
  const moveX = e.touches[0].clientX - startX;
  const moveY = e.touches[0].clientY - startY;
  
  // 判定横向滑动或下拉刷新手势
  const isHorizontalDrag = Math.abs(moveX) > Math.abs(moveY);
  const isPullDownRefresh = moveY > 50; // 下拉超过50px判定为刷新触发手势
  
  // 仅拦截目标手势
  if (isHorizontalDrag || isPullDownRefresh) {
    e.preventDefault();
  }
  
  // 更新起始坐标，避免连续滑动判断偏差
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
}, { passive: false });

注意：必须设置{ passive: false }，否则iOS中e.preventDefault()会被忽略。

2. 配合CSS固定页面（针对无滚动需求的网站）

如果网站本身不需要任何方向的滚动，可通过CSS彻底锁定页面，减少手势触发概率：

body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

3. 兼容局部可滚动元素（若有需求）

如果页面内存在局部可滚动容器（如弹窗列表），需避免拦截其正常滚动，可在touchmove中添加目标元素判断：

const target = e.target;
// 判断目标元素是否为可滚动容器
const isScrollable = target.scrollHeight > target.clientHeight && 
                     window.getComputedStyle(target).overflowY !== 'hidden';

// 仅当目标不是可滚动元素时，才拦截手势
if ((isHorizontalDrag || isPullDownRefresh) && !isScrollable) {
  e.preventDefault();
}

内容的提问来源于stack exchange，提问作者Ivan Chang