近期在写一个多弹窗的页面时,发现当弹窗出现时底部页面会出现滚动穿透现象,因此想到当弹窗显示与隐藏时js动态控制body的overflow的属性值,即
$("body").css("overflow","hidden");
$("body").css("overflow","visible");
在浏览器端调试的时候是能够达到预想中的效果,结果在移动端不管是iOS还是安卓系统都是无效的,在度娘上查看了前辈们的相关博客得知,这是移动端浏览器的一个特性,解决这个问题在网上有三种方法
1.body加position:fixed;100%;height:100%; 2.给要滚动的元素添加一个父级,设定高度,overflow:auto 3.html,body{height:100%;overflow:hidden}
我采用的是第三种方法,证实是很有效果的,但这时出现了另外的一个问题,当弹窗出现即body被禁止滚动时会先滚动到顶部,这样的话如果用户触发弹窗的事件元素位置在页面的底部,则体验非常不好,我的解决办法是:在禁止页面滚动时获取页面滚动的位置,允许页面滚动时再滚动到原来的位置
获取页面滚动位置 var scrollToTop=$(window).scrollTop; 设置页面滚动位置 $('body,html').scrollTop(scrollToTop);
最开始的时候我用的是$('body').scrollTop(scrollToTop)设置页面滚动的位置,结果发现无效,用$('html').scrollTop(scrollToTop)是有效的,为防止意外,最终使用的如上方法