JavaScript技巧之禁止页面滚动

一、禁止页面滚动是哪些场景下需要用到？

在某些场景下，我们需要禁止页面的滚动效果，比如弹出一个对话窗口或者是展示一个新的页面元素等。如果不禁止页面滚动，则可能会影响用户的体验，导致页面元素的错乱等问题。 那么禁止页面滚动的场景主要包含以下两种：

1. 在页面上展示一个新的元素，例如弹窗提示、轮播图等，为了防止用户在元素展示过程中会误操作、造成卡顿等情况发生，需要禁止页面滚动；
2. 移动端页面在滚动到某一元素时，元素的 fixed 定位可能会受到影响，出现错位等问题，为了避免这种情况的出现，需要禁止页面滚动，确保元素的正常展现。

二、如何禁止页面滚动

在JavaScript中，我们可以通过以下两种方法来禁止页面的滚动效果：

1. 阻止默认行为

window.addEventListener('touchmove', function (e) {
  e.preventDefault();
}, { passive: false });

上述代码中，我们使用addEventListener()方法为'touchmove'事件添加了一个事件监听函数，该函数中使用preventDefault()方法阻止了当前事件的默认行为，从而避免了页面滚动的情况。

2. 控制overflow

document.body.style.overflow = 'hidden'

使用上述代码可以通过控制页面的 'overflow' 属性来禁止页面的滚动效果，其中 'hidden' 表示隐藏滚动条。需要注意的是，该代码只适用于PC端，对于移动端则需要另行处理。

三、如何还原页面滚动

在完成了需要禁止页面滚动的操作后，如果需要恢复页面的滚动效果，我们可以通过以下方式实现：

1. 恢复默认行为

window.removeEventListener('touchmove', function (e) {
  e.preventDefault();
}, { passive: false });

使用addEventListener()方法添加的事件监听函数，我们可以使用removeEventListener()方法进行移除，从而实现恢复默认行为的目的。

2. 控制overflow

document.body.style.overflow = 'auto'

通过将 'overflow' 属性重新设置为 'auto'，我们可以实现页面滚动的恢复。同样需要注意的是，该代码只适用于PC端，对于移动端则需要另行处理。

四、注意事项

在使用上述方法来禁止页面滚动时，我们需要格外注意以下几点：

1. 注意兼容性，尤其是在移动端；
2. 在禁止页面滚动之后，需要及时恢复页面滚动，以免对用户体验造成影响；
3. 在添加和移除监听函数时，需要向对应的方法中传递同一个具有唯一标识的函数引用。