一、禁止页面滚动是哪些场景下需要用到？
在某些场景下，我们需要禁止页面的滚动效果，比如弹出一个对话窗口或者是展示一个新的页面元素等。如果不禁止页面滚动，则可能会影响用户的体验，导致页面元素的错乱等问题。
那么禁止页面滚动的场景主要包含以下两种：
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. 在添加和移除监听函数时，需要向对应的方法中传递同一个具有唯一标识的函数引用。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/256970.html
微信扫一扫 
支付宝扫一扫 