JS阻止页面滚动的三种思路

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

1. 使用 overflow 属性

通过设置CSS的 overflow 属性为 hidden，可以阻止页面滚动：

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

要恢复滚动，只需将 overflow 属性设置回 auto 或 visible：

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

2. 使用 addEventListener 阻止滚动事件

你可以使用 addEventListener 来监听滚动事件，并使用 preventDefault 来阻止其默认行为：

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

document.addEventListener('wheel', preventScroll, { passive: false });

要恢复滚动，可以使用 removeEventListener：

document.removeEventListener('wheel', preventScroll);

注意：在添加事件监听器时，我们设置 { passive: false }。这是因为某些浏览器默认将滚动事件处理为被动事件，这意味着它们不会等待JavaScript代码完成。设置 { passive: false } 确保我们可以调用 preventDefault。

3. 使用 position: fixed

将 body 的 position 设置为 fixed 可以使页面内容固定在当前位置，从而阻止滚动：

document.body.style.position = 'fixed';

要恢复滚动，只需将 position 属性设置回 static 或其他值：

document.body.style.position = 'static';

注意

在实际应用中，阻止滚动可能会影响用户体验，因此应该谨慎使用。确保在必要的时候（例如显示模态对话框时）才阻止滚动，并在不再需要时恢复滚动功能。