首页 > 移动平台 > 详细

解决移动端遮罩层无法覆盖全部页面问题

时间:2016-09-08 20:09:35      阅读:583      评论:0      收藏:0      [点我收藏+]

 

今天在做移动端项目的时候遇到遮罩层效果,按照以往的PC端我直接给同级遮罩层100%  给完之后测试看似完美但。。。

技术分享

                这就尴尬了。。。。

技术分享

之后查阅了相关资料得知这里有个方法可以解决这个问题那就是“禁止全局滚动”

 里面用的touch事件可参考 HTML5移动端触摸事件

document.addEventListaner(‘touchmove‘,stopTouchMove,false);
//当手在屏幕上移动的时候执行stopTouchMove函数(阻止默认事件)
//这个可以用在当遮罩层弹出的话执行
document.removeEventListener(‘touchmove‘,stopTouchMove,false);
//移除touchmove事件
//这个在关闭遮罩层时候执行
function stopTouchMove( e ) {
           e.preventDefault();
     }
//阻止默认事件函数

 

看看我是如何解决的。

技术分享

这样就完美解决了遮罩层无法覆盖全部页面的问题!

 

解决移动端遮罩层无法覆盖全部页面问题

原文:http://www.cnblogs.com/xhds/p/5854184.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!