JS禁止页面滚动

JS禁止页面滚动

在网页开发中，有时候我们希望在某些情况下禁止用户滚动页面，比如弹出模态框或者菜单时。本文将详细介绍如何使用JavaScript来实现禁止页面滚动的功能。

方法一：禁止整个页面滚动

实现思路

禁止整个页面滚动的方法是通过监听touchmove事件和mousewheel事件，阻止这些事件的默认行为从而达到禁止页面滚动的效果。

代码实现

// 禁止页面滚动
function disableScroll() {
    // 监听touchmove事件，阻止默认行为
    document.addEventListener('touchmove', preventDefault, { passive: false });
    // 监听mousewheel事件，阻止默认行为
    document.addEventListener('mousewheel', preventDefault, { passive: false });
}

// 启用页面滚动
function enableScroll() {
    // 移除touchmove事件监听
    document.removeEventListener('touchmove', preventDefault, { passive: false });
    // 移除mousewheel事件监听
    document.removeEventListener('mousewheel', preventDefault, { passive: false });
}

// 阻止默认事件
function preventDefault(e) {
    e.preventDefault();
}

示例

// 禁止页面滚动
disableScroll();

方法二：禁止指定元素内部滚动

有时候我们希望只禁止某个指定元素内部的滚动，而不影响整个页面的滚动。下面介绍如何实现这一功能。

实现思路

对于指定元素内部滚动的禁止，我们可以通过监听指定元素的touchmove事件和mousewheel事件，阻止这些事件的默认行为。

代码实现

// 禁止指定元素内部滚动
function disableScrollInsideElement(element) {
    // 监听touchmove事件，阻止默认行为
    element.addEventListener('touchmove', preventDefault, { passive: false });
    // 监听mousewheel事件，阻止默认行为
    element.addEventListener('mousewheel', preventDefault, { passive: false });
}

// 启用指定元素内部滚动
function enableScrollInsideElement(element) {
    // 移除touchmove事件监听
    element.removeEventListener('touchmove', preventDefault, { passive: false });
    // 移除mousewheel事件监听
    element.removeEventListener('mousewheel', preventDefault, { passive: false });
}

示例

// 获取指定元素
const container = document.getElementById('container');
// 禁止指定元素内部滚动
disableScrollInsideElement(container);

结语

通过以上两种方法，我们可以灵活地控制页面滚动的行为，实现一些特定场景下的需求。在实际项目中，可以根据具体情况选择适合的方法来禁止页面滚动。