vue移动端遮罩层滚动穿透问题

今天小编在做项目的时候发现了一个问题，各种查资料才得以解决。下面来简单介绍一下问题：

在页面中，我们需要点击按钮展示一个遮罩层，且遮罩层里面内容可滚动，但是遮罩层盖住的区域不可滚动，这样一个问题。

搜索之后发现，在遮罩层标签上添加这样一个代码@touchmove.prevent.stop @mousewheel.prevent可以实现禁止页面滚动，但是遮罩层内容也不可以滚动，所以这个方案pass，如果你们遇到不需要遮罩层内容滚动的话，可以采用这样的方法。

下面来介绍下解决方法：

首先我们在data里面初始化一个变量scrollTop，然后在methods里面写这样两个方法：

//这是打开遮罩层的方法
openHiddenBox() {
        this.show = true;
        // 处理遮罩层出现后，遮罩层下的页面仍然可以滚动的问题，（遮罩层内的内容仍然可以滚动）
        this.scrollTop = document.scrollingElement.scrollTop;
        document.body.classList.add('dialog-open');
        document.body.style.top = -this.scrollTop + 'px';
    },
//这是关闭遮罩层的方法
closeHiddenBox(){
      this.show = false;
       // 处理遮罩层出现后，遮罩层下的页面仍然可以滚动的问题，（遮罩层内的内容仍然可以滚动）
        document.body.classList.remove('dialog-open');
        document.scrollingElement.scrollTop = this.scrollTop;
    }

然后在样式里面添加如下代码

body.dialog-open{
  position: fixed;
  width: 100%;
}

然后就可以解决啦！

最后

以上就是妩媚鼠标为你收集整理的vue移动端遮罩层滚动穿透问题的全部内容，希望文章能够帮你解决vue移动端遮罩层滚动穿透问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。