如何在触摸设备上触摸特定HTML元素时阻止页面滚动？

核心思路 #

要实现游戏容器内拖动时禁止页面滚动/刷新、容器外正常滚动的效果，关键是精准拦截触摸事件的默认行为，且仅在游戏容器范围内生效，避免干扰页面其他区域的正常滚动。

具体实现步骤 #

1. 绑定触摸事件并判断拖动方向 #

直接阻止所有touchmove默认行为可能影响游戏操作（比如横向拖动需求），建议先记录触摸起始位置，判断拖动方向后再决定是否拦截：

const gameContainer = document.getElementById('your-game-container');
let startY = 0;

// 记录触摸起始坐标
gameContainer.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
  e.stopPropagation();
});

// 根据拖动方向决定是否阻止默认行为
gameContainer.addEventListener('touchmove', (e) => {
  const currentY = e.touches[0].clientY;
  const deltaY = currentY - startY;
  const deltaX = e.touches[0].clientX - e.targetTouches[0].clientX;

  // 仅当垂直拖动幅度大于横向时，阻止页面滚动/刷新
  if (Math.abs(deltaY) > Math.abs(deltaX)) {
    e.preventDefault();
    e.stopPropagation();
  }
}, { passive: false }); // 关键：禁用passive模式，确保preventDefault生效

gameContainer.addEventListener('touchend', (e) => {
  e.stopPropagation();
});

2. 处理浏览器自带的回弹/下拉刷新 #

部分移动端浏览器（如Chrome、Safari）有原生下拉刷新或弹性回弹，可通过CSS+JS组合处理：

CSS层面（优先推荐）

给游戏容器添加样式，直接禁用浏览器的触摸默认行为：

#your-game-container {
  touch-action: none; /* 禁用所有触摸默认行为，如滚动、缩放 */
  overflow: hidden; /* 避免容器内部出现滚动条 */
}

若游戏需要保留横向拖动，可替换为touch-action: pan-x，仅允许横向操作、禁止纵向滚动。

JS层面补充

如果CSS的touch-action不生效，可强制在touchmove中拦截默认行为：

gameContainer.addEventListener('touchmove', (e) => {
  e.stopImmediatePropagation(); // 阻止同一元素上其他事件监听器执行
  e.preventDefault();
}, { passive: false });

3. 排查事件冲突 #

检查父元素是否绑定了触摸事件，导致stopPropagation()失效。若存在冲突，可使用event.stopImmediatePropagation()确保当前事件拦截优先执行。

之前方案无效的常见原因 #

• 部分浏览器默认touchmove事件为passive模式，不允许调用preventDefault()，必须显式设置{ passive: false }。
• 未判断拖动方向，导致拦截逻辑不准确，或拦截时机错误。
• 未处理浏览器原生的下拉刷新等全局行为，这类行为无法被普通事件拦截直接阻止。

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