[解决手机页面滚动条]解决手机页面滚动穿透问题

更新时间:2020-04-04    来源:微信    手机版     字体:

【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:

本文来源:http://www.bbyears.com/shoujikaifa/91900.html

热门标签

更多>>

本类排行