移动端body设置overflow：hidden失效与设置之后页面会向上滚动问题

Posted 2020-12-26 joyer-lee

近期在写一个多弹窗的页面时，发现当弹窗出现时底部页面会出现滚动穿透现象，因此想到当弹窗显示与隐藏时js动态控制body的overflow的属性值，即

$("body").css("overflow","hidden");
$("body").css("overflow","visible");

在浏览器端调试的时候是能够达到预想中的效果，结果在移动端不管是ios还是安卓系统都是无效的，在度娘上查看了前辈们的相关博客得知，这是移动端浏览器的一个特性，解决这个问题在网上有三种方法

1.body加position：fixed;width: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)是有效的，为防止意外，最终使用的如上方法