【www.bbyears.com--微信】
最近在写的微信页面有遇到一个问题:就是点击页面一个按钮出来弹框和透明蒙版后,理论上底部的父页面是不可以被操作的。但是现在对当前弹框和透明蒙版组成的页面滑动时,底部的父页面还是会跟着滚动,这也就是所谓的手机页面穿透问题。
百度了很多方法后,还是没能完美的解决这个问题。不过这里也将把这些方法总结列举一下,期待后面有更好的解决办法。
方法一:
.alpha {
height: 100%;
overflow: hidden;
position: relative;
}
.alpha body {
height: 100%;
overflow: hidden;
}
当你切换弹框出现或隐藏的时候只要切换该css,即:
$("html").toggleClass("alpha");
当然在实际使用的时候你可能需要拆开使用这句代码,如当你点击按钮让弹框出来的时候需要使用该css,即用:
$("html").toggleClass("alpha");
当你点击确定或取消让弹框消失的时候,你需要去掉该css使父页面恢复正常滚动状态,即:
$("html").removeClass("alpha");
该方法的缺点就是当你的页面内容一屏显示不完时,需要滚动屏幕显示全部内容时,你的弹框会出现在页面内容的顶部,因为上面的css已经将页面高度定义成了屏幕高度,所以页面下面的部分也就相当于暂时截取掉了,当你隐藏弹框的时候,你也是在页面顶部,不会默认回到你之前点击按钮(按钮在页面底部)的地方,在页面很长的时候用户体验不是很好。
方法二:
.noscroll {
position: fixed!important
}
var page = document.getElementsByTagName("body")[0];
//禁止页面滚动
page.classList.add("noscroll");
//恢复页面滚动
page.classList.remove("noscroll");
也有上面的缺点
方法三:
//If you want to use the iframe"s scrollbar and not the parent"s use this
document.body.style.overflow = "hidden";
//If you want to use the parent"s scrollbar and not the iframe"s then you need to use:
document.getElementById("your_iframes_id").scrolling = "no";
or set the scrolling="no" attribute in your iframe"s tag: