JavaScript中禁止移动端页面滚动的DOM处理方案-js教程-PHP中文网

禁止用户滚动需监听 touchmove 事件并调用 preventDefault()，且监听器必须设置 { passive: false }；推荐结合 overflow: hidden、overscroll-behavior 和滚动位置保存以兼顾兼容性与体验。

javascript中禁止移动端页面滚动的dom处理方案

在移动端页面中，禁止用户滚动通常是为了实现全屏弹窗、引导页、加载遮罩等场景。关键在于阻止默认的 touchmove 行为，同时兼顾兼容性和体验细节。

核心：阻止 touchmove 默认行为

移动端滚动本质由 touchmove 事件触发，默认行为是滚动视口。只需监听该事件并调用 preventDefault() 即可拦截：

必须在事件监听器中显式调用 e.preventDefault()
监听目标建议设为 document 或 body，确保覆盖所有区域
注意：仅对 passive: false 的监听器才允许调用 preventDefault()

推荐写法：带 passive 控制的监听

现代浏览器默认将 touch 事件设为 passive（无法阻止），因此需显式声明 { passive: false }：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

function disableScroll() {
  const preventMove = (e) => e.preventDefault();
  document.addEventListener('touchmove', preventMove, { passive: false });
  return () => {
    document.removeEventListener('touchmove', preventMove);
  };
}

// 启用
const cleanup = disableScroll();

// 恢复滚动（记得调用）
cleanup();