弹出遮罩层后，如何禁止底层页面的滚动

betacat 发布于2019-04-23 13:24 / 2119人阅读

摘要：但是，我们会发现，当弹出遮罩层后，底层的内容也是可以滚动，显然这不是我们想要的效果，而这个问题就是小萌最近开发项目时遇到的问题。

弹窗是一种常见的交互方式，而蒙层则是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，我们会发现，当弹出遮罩层后，底层body的内容也是可以滚动，显然这不是我们想要的效果，而这个问题就是小萌最近开发项目时遇到的问题。

一个小程序的项目，是用MPVUE(一个使用 Vue.js 开发小程序的前端框架)做的。其中有做一个详情页面领取优惠券的功能。点击领取按钮，优惠券列表从底部滑出，有一个半透明的遮罩层，然后列表这块是可以滚动的，一切都没有问题，但是当拖动了下底层页面，发现底层body的内容也是可以滚动的，于是参考其他小程序如：京东、小黄车的小程序，他们的也是有这个问题的，但是吧，产品需求是不要底层这部分的滚动的，而且用户的一般习惯也是这样的，只有改了

尝试方法一：

当蒙层显示时，为了符合各种机型的“解析方式”，给HTML和body都添加样式：

body{
    height: 100%;
    overflow: hidden;
}

蒙层消失时，移除以上样式。

你以为就这么简单的解决这个问题了嘛？如果是，只能说是你太天真了，这个方法兼容性很不好，适用于pc，然而移动端就尴尬了，在手机上并没有什么卵用。该怎么滚还是怎么滚……压根不受你所写代码的任何限制，你说气人不？

尝试方法二：

既然我们使用vue的语法来写代码的，那不如我们用vue的方式来解决下这个问题。vue提供的 @touchmove.prevent 方法可以用来阻止滑动，有童鞋说这个方法可以完美解决这个问题，然后我就兴冲冲的把这个方法添加到我的页面当中。

当我满怀期待以为问题就这样迎刃而解的时候，我又发现了一个新的问题，就是这个方法对其内的子div的滑动事件也禁止掉了，这样会导致蒙层部分也是无法滑动的。如果没有蒙层部分的滑动需求，用 @touchmove.prevent 实现是一个很好的方法，但是我有这个需求呀，苍了个天┌╏ º □ º ╏┐

这个方法也并没有童鞋说的那么完美嘛……

尝试方法三：

解决这个问题的晚上在公司加班，改各种bug，因为第二天要上线一部分功能。然后小呆放心不下，怕我下班太晚，就在公司这里的休息区等我，然后我给小呆送吃的时候就问了问小呆，小呆说这个问题你直接用定位解决吧，最靠谱的，其他的有些方法，安卓机会坑死你的……

然后我就想，用定位也是一个办法，然后就用定位试了试，当点击显示蒙层时，为body添加样式：

1 body{
2     position:fixed;
3     top:0;
4     height: 100%;
5     overflow: hidden;
6 }

在关闭弹出层时，去掉这段样式就可以了。

哎，你还别说，这个方法真的有效，底层的内容不会滚动了。问题解决了，然后就是还有一个细节要考虑，就是将页面定位后，内容会回到头部最顶端，如有需要，这里我们需要记录一下，当取消蒙层时同步top值。

云服务器 GPU云服务器点击弹出遮罩层弹出遮罩手机弹出遮罩菜单 js弹出一个遮罩层

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1833.html

兼容移动端 js弹出框实现微信禁止h5禁止网页下拉，滚动穿透，禁止微信内置浏览器下拉网页

摘要：弹出层触发时候页面设置为高度百分百将不能滚动设置的样式为取消时候把样式重置还原为最初弹出层遮罩层灰色区域点击关闭遮罩层遮罩层阻止冒泡默认事件弹出层禁止页面弹出框弹出时候市面下拉滚动监听事件，这样一来整个页面将不能滚动所以添加一个判断你的大盒 //弹出层触发时候页面设置为高度百分百将不能滚动设置body html的样式为overflow: hidden,height:100%//取消时...

robin 2019-08-30 15:56 评论0 收藏0
兼容移动端 js弹出框实现微信禁止h5禁止网页下拉，滚动穿透，禁止微信内置浏览器下拉网页

摘要：弹出层触发时候页面设置为高度百分百将不能滚动设置的样式为取消时候把样式重置还原为最初弹出层遮罩层灰色区域点击关闭遮罩层遮罩层阻止冒泡默认事件弹出层禁止页面弹出框弹出时候市面下拉滚动监听事件，这样一来整个页面将不能滚动所以添加一个判断你的大盒 //弹出层触发时候页面设置为高度百分百将不能滚动设置body html的样式为overflow: hidden,height:100%//取消时...

inapt 2019-08-26 13:35 评论0 收藏0
兼容移动端 js弹出框实现微信禁止h5禁止网页下拉，滚动穿透，禁止微信内置浏览器下拉网页

摘要：弹出层触发时候页面设置为高度百分百将不能滚动设置的样式为取消时候把样式重置还原为最初弹出层遮罩层灰色区域点击关闭遮罩层遮罩层阻止冒泡默认事件弹出层禁止页面弹出框弹出时候市面下拉滚动监听事件，这样一来整个页面将不能滚动所以添加一个判断你的大盒 //弹出层触发时候页面设置为高度百分百将不能滚动设置body html的样式为overflow: hidden,height:100%//取消时...

高璐 2019-08-02 14:30 评论0 收藏0
移动端下弹框禁止背景滑动

摘要：移动端下弹框禁止背景滑动茴字写法有很多种，找到最适合的才是好的。移动端下弹框禁止背景滑动茴字写法有很多种，找到最适合的才是好的。以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $(html, body,.pa...

pf_miles 2019-08-29 17:04 评论0 收藏0
移动端下弹框禁止背景滑动

摘要：移动端下弹框禁止背景滑动茴字写法有很多种，找到最适合的才是好的。移动端下弹框禁止背景滑动茴字写法有很多种，找到最适合的才是好的。以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $(html, body,.pa...

baukh789 2019-08-02 11:50 评论0 收藏0