记[移动端滚动穿透问题]

描述

弹出层内容(比如弹框)滚动时，body跟随滚动。

方案：

方案一：overflow: hidden

将body的css中overflow设置为hidden

//禁止滚轮事件
document.body.sytle.overflow='hidden'

缺点:因移动端内核原因，只适用于PC端，移动端上无效果。

方案二：touchmove + preventDefault

     function clickPop(){//点击弹窗
         document.addEventListener('touchmove', touchStart,{passive:false});
     }
     function touchStart(){
         event.preventDefault();
     }
     function closePop(){//点击关闭弹窗
         document.removeEventListener('touchmove',touchStart,{passive:false});
     }

缺点:这是全局禁用滚轮事件，会导致弹出层也无法使用滚轮；并且博主使用后，removeEventListener并未移除事件，导致关闭弹出层后还是无法使用滚轮事件。。

方案三：position: fixed

和方案一相似，将body的position设置为fixed

//禁止滚轮
document.body.sytle.position='fixed'
//激活滚轮
document.body.sytle.position='static'

缺点:document.body.sytle.position='fixed’会使页面回到最顶部，影响体验

方案四[最终方案]：position: fixed + scrollTop

声明一个变量存页面的scroolTop

var nowScrollTop=0//初始化
//禁止滚轮
function clickPop(){
	nowScrollTop=document.body.scrollTop || document.documentElement.scrollTop //将页面的scroolTop赋值给变量
	document.body.style.position="fixed"
    document.body.style.top = -nowScrollTop + 'px'
}
//激活滚轮
function closePop(){
    document.body.style.position="static"
    document.body.scrollTop = document.documentElement.scrollTop = nowScrollTop
}
//弹框开启钩子
function openModal(){
	clickPop()
}
//弹框关闭钩子
function closeModal(){
	closePop()
}

需要注意的是变量nowScrollTop声明的位置，因为初始化的原因，如果变量声明在react的function(子组件)中，每次子组件被渲染都会把变量初始化为0，不符合预期，所以博主将变量声明到全局变量中。如图：