JavaScript禁止和允许页面滚动的方法

　　在Web开发中，有时候我们需要控制页面是否可以滚动。本文将介绍两种常用的方法来禁止和允许页面滚动，分别是直接操作页面样式和通过事件监听器阻止默认行为。

　　禁止页面滚动：

　　复制代码document.body.style.overflow = 'hidden';

　　允许页面滚动：

　　复制代码document.body.style.overflow = 'visible';

　　这种方法通过直接修改页面的样式来控制滚动，将属性设置为可以禁止页面滚动，设置为可以允许页面滚动。

　　复制代码// 禁止页面滚动function disableScroll() { document.body.addEventListener('touchmove', preventDefault, { passive: false });}// 允许页面滚动function enableScroll() { document.body.removeEventListener('touchmove', preventDefault, { passive: false });}// 阻止touchmove事件的默认行为function preventDefault(event) { event.preventDefault();}

　　这种方法通过添加或移除事件监听器来阻止事件的默认行为，从而禁止或允许页面滚动。在需要禁止页面滚动的时候，调用函数；在需要允许页面滚动的时候，调用函数。

　　下面是一个示例代码，演示了如何在点击显示遮罩层时禁止页面滚动，在关闭遮罩层时解除页面禁止滚动：

　　复制代码var maskElement = document.getElementById('mask'); // 假设遮罩层的元素id为 "mask"https:// 点击显示遮罩层function showMask() { maskElement.style.display = 'block'; disableScroll(); // 禁止页面滚动}// 点击关闭遮罩层function closeMask() { maskElement.style.display = 'none'; enableScroll(); // 解除页面禁止滚动}

　　在上述代码中，当点击显示遮罩层时，调用函数来禁止页面滚动；当点击关闭遮罩层时，调用函数来解除页面禁止滚动。

　　以上就是禁止和允许页面滚动的两种常用方法。根据具体的需求，你可以选择适合的方法来实现页面滚动的控制。

本站资源均来自互联网或会员发布，如果不小心侵犯了您的权益请与我们联系。我们将立即删除！谢谢！