如何使用JavaScript禁用移动端滚动 解决canvas触摸误滚动问题

给body设置overflow: hidden不生效的核心原因是：移动端浏览器的默认滚动、手势回弹逻辑是绑定在视口和触摸事件层面的，单纯限制容器溢出无法拦截触摸行为触发的默认滚动响应，按以下步骤修改即可彻底解决：

• 首先在页面<head>中补全视口配置，禁用全局缩放减少手势干扰：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 调整全局和Canvas相关容器的CSS，从样式层面切断滚动触发的可能：

/* 同时给html根元素和body加限制，避免根元素承接滚动行为 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none; /* 禁用移动端下拉回弹、边缘滑动跳转等默认手势 */
}

/* 给canvas及父容器加触摸行为限制 */
.canvas-container, canvas {
  touch-action: none; /* 核心属性：告知浏览器该区域所有触摸交互由业务代码接管，不触发默认滚动、缩放 */
}
canvas {
  display: block;
}

• 加一层JS事件兜底，彻底拦截Canvas区域的触摸默认行为：

const gameCanvas = document.getElementById('你的canvas元素ID');
// 注意必须设置passive: false，否则移动端Chrome等浏览器会忽略preventDefault调用
const touchEventHandler = (e) => {
  e.preventDefault();
  // 这里放你原本的触摸绘制、细胞状态更新逻辑
};

gameCanvas.addEventListener('touchstart', touchEventHandler, { passive: false });
gameCanvas.addEventListener('touchmove', touchEventHandler, { passive: false });

注意：不要全局给document或body绑定阻止默认触摸事件的逻辑，会导致页面内其他需要滚动的模块（比如规则说明弹窗、操作指南文本）完全无法滑动，只需要给Canvas元素绑定拦截即可。

之前单独给body加overflow: hidden的方案只对PC端鼠标触发的常规内容溢出滚动有效，对移动端触摸驱动的视口滚动没有拦截作用，配合touch-action属性和定向的事件阻止，就能完全解决触摸绘制时页面小幅窜动的问题。

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