如何解决移动端遮罩层上面滑动穿透事件

前段时间，在做移动端项目的时候，遇到滑动穿透事件。可以理解为冒泡事件？大概就是，当你滑动遮罩层上面的内容的时候，遮罩层下面的内容也会跟着一起动，这样用户体验就很不好了。后面百度了一堆方法，都是各种操作dom元素。自己这个本身是一个vue项目，还要操作dom？这就很不爽了吧。

解决思路 主要两步就完美解决了整个问题 

1 使用vue的阻止默认事件 @touchmove.prevent  给遮罩层一个阻止默认事件

2 用一个div把你想不能让他滑动的内容包裹起来，div的样式设置为

.hidden{

overflow: hidden;

position:fixed;

height: 100%;

width: 100%;

}

3 当你弹出遮罩层的同时把这个div的样式也添加上去。移除遮罩层的同时，也移除这个类

 

4 重点是div的样式设置为固定定位这样就解决了下面的内容跟着一起滑动的问题了。