js 禁止页面滚动

在JavaScript中禁止页面滚动可以通过多种方式实现，以下是一些常见的方法：

1. 使用CSS样式

可以通过设置overflow属性为hidden来禁止滚动：

body {
    overflow: hidden;
}

或者在JavaScript中动态添加这个样式：

document.body.style.overflow = 'hidden';

2. 阻止滚动事件

可以通过监听wheel（滚轮事件）和touchmove（触摸滑动事件）来阻止默认的滚动行为：

function preventScroll(event) {
    event.preventDefault();
}

// 禁止鼠标滚轮滚动
window.addEventListener('wheel', preventScroll, { passive: false });

// 禁止触摸滑动滚动
window.addEventListener('touchmove', preventScroll, { passive: false });

3. 使用全屏API

如果需要禁止全屏滚动，可以使用全屏API来控制：

function requestFullScreen() {
    var elem = document.documentElement;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
    }
}

requestFullScreen();

进入全屏模式后，通常浏览器会自动禁止滚动。

4. 使用第三方库

有一些第三方库可以帮助简化禁止滚动的过程，例如body-scroll-lock：

import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

// 禁止滚动
disableBodyScroll(document.querySelector('#element'));

// 恢复滚动
enableBodyScroll(document.querySelector('#element'));