写这篇博客的只是为了记录项目中遇到的问题,希望能帮助自己和遇到同样问题的小伙伴,话不多说,直接上代码就完事啦!
一,css代码
//在弹出层显示时要给body加上fixed,使其失去滚动功能,同时会丢失原有的滚动位置,所有要先把此时body的滚动位置记录下来
body.mask-open{
position: fixed;
width: 100%;
}
二,js代码
当弹层弹出时要记录下body的滚动条滚动位置,等弹层关闭后要滚动到弹出前的位置
/**
* 弹窗滚动穿透
* @param {Boolean} state [弹窗状态]
*/
overbody(state,_this){
if(state){
//记录此时滚动条位置
_this.scrollTop = getScrollTop();
// 使body固定定位,脱离文档流
document.body.classList.add('mask-open');
// 把脱离文档流的body拉上去!否则页面会回到顶部!
document.body.style.top = -_this.scrollTop + 'px';
}else{
// body去除固定定位,回到了文档流中
document.body.classList.remove('mask-open');
// 回打开前滚动条位置
goScrollTop(_this.scrollTop);
_this.scrollTop = 0;
}
function goScrollTop(scrollTop){
document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
}
function getScrollTop(){
return document.body.scrollTop || document.documentElement.scrollTop;
}
},