遮罩层滚动问题及解决方案

在开发中，我们经常会遇到需要使用遮罩层的场景（如弹窗、加载等）。但在实现过程中，可能会遇到以下问题：

1. 移动端：触摸遮罩层时，底层页面会跟随滚动
2. PC端：滚动鼠标滚轮时，底层页面会跟随滚动

解决方案

针对不同端，我们可以使用不同的事件处理方式：

<!-- 移动端解决方案 -->
<div class="mask" @touchmove.prevent></div>

<!-- PC端解决方案 -->
<div class="mask" @scroll.prevent></div>

代码说明

• @touchmove.prevent：阻止移动端触摸移动事件的默认行为
• @scroll.prevent：阻止PC端滚动事件的默认行为

使用建议

为了同时兼容移动端和PC端，建议两个事件一起使用：

<div class="mask" 
     @touchmove.prevent 
     @scroll.prevent>
</div>

这样可以确保在各种设备上都能正常工作。