弹出遮罩层后,如何禁止底层页面的滚动
2018-09-18 06:32:50来源:博客园 阅读 ()
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问题就是小萌最近开发项目时遇到的问题。
一个小程序的项目,是用MPVUE(一个使用 Vue.js 开发小程序的前端框架)做的。其中有做一个详情页面领取优惠券的功能。点击领取按钮,优惠券列表从底部滑出,有一个半透明的遮罩层,然后列表这块是可以滚动的,一切都没有问题,但是当拖动了下底层页面,发现底层body的内容也是可以滚动的,于是参考其他小程序如:京东、小黄车的小程序,他们的也是有这个问题的,但是吧,产品需求是不要底层这部分的滚动的,而且用户的一般习惯也是这样的,只有改了
尝试方法一:
当蒙层显示时,为了符合各种机型的“解析方式”,给HTML和body都添加样式:
body{ height: 100%; overflow: hidden; }
蒙层消失时,移除以上样式。
你以为就这么简单的解决这个问题了嘛?如果是,只能说是你太天真了,这个方法兼容性很不好,适用于pc,然而移动端就尴尬了,在手机上并没有什么卵用。该怎么滚还是怎么滚……压根不受你所写代码的任何限制,你说气人不?
尝试方法二:
既然我们使用vue的语法来写代码的,那不如我们用vue的方式来解决下这个问题。vue提供的 @touchmove.prevent
方法可以用来阻止滑动,有童鞋说这个方法可以完美解决这个问题,然后我就兴冲冲的把这个方法添加到我的页面当中。
当我满怀期待以为问题就这样迎刃而解的时候,我又发现了一个新的问题,就是这个方法对其内的子div的滑动事件也禁止掉了,这样会导致蒙层部分也是无法滑动的。如果没有蒙层部分的滑动需求,用 @touchmove.prevent 实现是一个很好的方法,但是我有这个需求呀,苍了个天┌? o □ o ?┐
这个方法也并没有童鞋说的那么完美嘛……
尝试方法三:
解决这个问题的晚上在公司加班,改各种bug,因为第二天要上线一部分功能。然后小呆放心不下,怕我下班太晚,就在公司这里的休息区等我,然后我给小呆送吃的时候就问了问小呆,小呆说这个问题你直接用定位解决吧,最靠谱的,其他的有些方法,安卓机会坑死你的……
然后我就想,用定位也是一个办法,然后就用定位试了试,当点击显示蒙层时,为body添加样式:
1 body{ 2 position:fixed; 3 top:0; 4 height: 100%; 5 overflow: hidden; 6 }
在关闭弹出层时,去掉这段样式就可以了。
哎,你还别说,这个方法真的有效,底层的内容不会滚动了。问题解决了,然后就是还有一个细节要考虑,就是将页面定位后,内容会回到头部最顶端,如有需要,这里我们需要记录一下,当取消蒙层时同步top值。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:css盒模型中margin很牛逼
- 如果是自学WEB前端的话,该如何才能找到一份7K实习生工作呢 2020-06-04
- 前端如何学习? 2020-06-04
- 如何成为一名优秀的web前端工程师 2020-06-02
- 零基础小白转行如何入门学习web前端 2020-06-01
- 如何在博客园添加自己的头像 2020-05-27
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash