vue 弹窗阻止页面滚动

动态效果

在Vue项目中，当弹出一个模态窗口或蒙层时，通常希望阻止背后页面的滚动，以提供更好的用户体验。以下是几种常见的方法来实现这一功能：

移动端解决方案：
在蒙层的div标签上添加@touchmove.prevent指令，这样可以阻止在触摸移动时的滚动行为。
```
<div class="maskBox" @touchmove.prevent></div>
```
这种方法适用于移动端浏览器。

PC端解决方案：
当弹层显示时，调用一个stopMove函数来停止页面滚动，当弹层消失时，调用Move函数来恢复页面滚动。

// 停止页面滚动
stopMove(){
  let m = function(e){e.preventDefault();};
  document.body.style.overflow='hidden';
  document.addEventListener("touchmove",m,{ passive:false });
},
// 开启页面滚动
Move(){
  let m =function(e){e.preventDefault();};
  document.body.style.overflow='';
  document.removeEventListener("touchmove",m,{ passive:true });
}

这种方法通过添加事件监听和修改body的overflow属性来控制页面滚动。

CSS类方法：
可以在弹窗显示时给body添加一个类，并在CSS中将body的overflow设置为hidden。当弹窗关闭时，再将body的overflow设置回auto。
```
.no-scroll {
  overflow: hidden;
}
```
然后在JavaScript中切换这个类：
```
document.body.classList.add('no-scroll');
document.body.classList.remove('no-scroll');
```
这种方法通过CSS控制页面滚动[2]。
固定定位方法：
另一种方法是在遮罩层显示时，将下方的父盒子设置为固定定位，宽度100%，高度100vh，并设置超出隐藏。
```
.parent-box {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
```
这种方法通过改变父盒子的定位和溢出属性来阻止滚动[3]。
综合方案：
在某些情况下，可能需要结合以上方法，并考虑移动端和PC端的兼容性，以及是否需要处理蒙层内容的滚动条问题。例如，如果蒙层内容需要滚动，可能需要更复杂的逻辑来判断触摸事件的目标元素，并相应地阻止或允许滚动。

根据你的项目需求，你可以选择适合的方法来实现弹窗时阻止页面滚动的功能。

运行效果

vue 弹窗阻止页面滚动

实例代码下载

代码运行环境vue3 vite js nodejs 16

vue3框架vue2写法