在一些特定场景下，我们希望用户不可以通过拖动鼠标或手指来滚动页面，比如弹出层、提示框等，在这些场景下，禁止页面滚动就非常必要。本文将介绍几种实现禁止页面滚动的方式。
overflow: hidden; 可以让节点内容溢出部分被隐藏掉，并且同时禁用节点的滚动功能。这个方式比较简单，但是只适用于当前节点内的内容，无法对整个页面进行禁止滚动的操作。
body {
overflow: hidden;
}
利用 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 = '';
}
body-scroll-lock 是基于 JavaScript 实现的一个禁止页面滚动的库，可以方便地实任意场景下禁止页面滚动。
使用方式：
import BodyScrollLock from 'body-scroll-lock';
const targetElement = document.querySelector('#target');
// 锁定滚动
BodyScrollLock.disableBodyScroll(targetElement);
// 解除锁定
BodyScrollLock.enableBodyScroll(targetElement);
以上是禁止页面滚动的三种方法，每一种方法都有其优缺点和适用范围。选择哪一种方法需要根据具体情况来定。
本文链接：http://task.lmcjl.com/news/2766.html