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

最新推荐文章于 2023-06-16 17:32:24 发布

一个巨蟹座的前端

最新推荐文章于 2023-06-16 17:32:24 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue js

本文链接：https://blog.csdn.net/weixin_47813845/article/details/119445438

vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

24 篇文章

订阅专栏

本文介绍了如何在页面中创建一个可滚动的遮罩层，同时确保遮罩层外的页面不被影响。通过初始化scrollTop变量和定制openHiddenBox/closeHiddenBox方法，实现了遮罩层内容独立滚动。关键在于阻止body整体滚动，仅控制遮罩层内部行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

搜索之后发现，在遮罩层标签上添加这样一个代码@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%;
}

然后就可以解决啦！