在 HTML 页面中禁止页面滚动，常见的方法有以下几种，主要通过 CSS 和 JavaScript 控制 <body> 或 <html>元素的样式：

✅ 方法一：使用 CSS 设置 overflow: hidden

方式 1：直接在 CSS 中设置（适用于全局禁止滚动）

<style>
  body {
    overflow: hidden;
  }
</style>

方式 2：用 JavaScript 动态控制（适用于某些交互，比如弹窗出现时禁滚）

// 禁止滚动
document.body.style.overflow = 'hidden';

// 恢复滚动
document.body.style.overflow = 'auto';

✅ 方法二：添加/移除 CSS 类控制滚动

CSS 定义：

.no-scroll {
  overflow: hidden;
}

JavaScript 控制：

// 禁止滚动
document.body.classList.add('no-scroll');

// 恢复滚动
document.body.classList.remove('no-scroll');

✅ 方法三：禁止触摸设备的滚动（移动端常用）

// 禁止触摸滑动（适用于移动端）
document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, { passive: false });

⚠️ 注意：这会影响所有触摸行为，慎用！

✅ 方法四：将页面内容锁定在当前位置

// 锁定滚动位置
const scrollTop = window.scrollY || document.documentElement.scrollTop;
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollTop}px`;
document.body.style.width = '100%';

// 解除锁定并恢复滚动位置
const top = Math.abs(parseInt(document.body.style.top || '0', 10));
document.body.style.position = '';
document.body.style.top = '';
document.body.style.width = '';
window.scrollTo(0, top);

这种方法非常适用于弹窗场景，防止背景滚动。

小结：

方法场景推荐优点缺点
overflow: hidden简单页面、弹窗简单直观可能不适用于某些框架容器
添加类名控制可维护性高样式统一需提前写好样式
禁止 touchmove移动端专用有效防止滑动会影响所有滑动交互
锁定 scroll 位置高级场景保留当前位置实现略复杂

如果你告诉我你想在哪个场景中禁止滚动（比如弹窗、移动端菜单、还是整个页面），我可以给你更具体的实现方式。