css禁止页面滚动的实现方法

在一些特定场景下，我们希望用户不可以通过拖动鼠标或手指来滚动页面，比如弹出层、提示框等，在这些场景下，禁止页面滚动就非常必要。本文将介绍几种实现禁止页面滚动的方式。

1. 使用 CSS 的 overflow 属性

overflow: hidden; 可以让节点内容溢出部分被隐藏掉，并且同时禁用节点的滚动功能。这个方式比较简单，但是只适用于当前节点内的内容，无法对整个页面进行禁止滚动的操作。

body {
  overflow: hidden;
}

2. 使用 JavaScript 监听滚动事件

利用 JavaScript 监听滚动事件，再阻止默认事件的方式实现禁止页面滚动。这种方式可以在任何需要禁止滚动的地方使用，但是代码量较多。

function preventDefault(e) {
  e.preventDefault();
}

function disableScroll() {
  document.body.addEventListener('touchmove', preventDefault, { passive: false });
  document.body.addEventListener('mousewheel', preventDefault, { passive: false });
  document.body.style.overflow = 'hidden';
}

function enableScroll() {
  document.body.removeEventListener('touchmove', preventDefault);
  document.body.removeEventListener('mousewheel', preventDefault);
  document.body.style.overflow = '';
}

3. 使用第三方库 body-scroll-lock

body-scroll-lock 是基于 JavaScript 实现的一个禁止页面滚动的库，可以方便地实任意场景下禁止页面滚动。

使用方式：

import BodyScrollLock from 'body-scroll-lock';

const targetElement = document.querySelector('#target');

// 锁定滚动
BodyScrollLock.disableBodyScroll(targetElement);

// 解除锁定
BodyScrollLock.enableBodyScroll(targetElement);

以上是禁止页面滚动的三种方法，每一种方法都有其优缺点和适用范围。选择哪一种方法需要根据具体情况来定。