分享一个移动端 ios弹出mask蒙层或者是弹出框发生滚动穿透的问题,纯属自己慢慢从坑中摸索出来的,希望能帮助到身处坑中的朋友,如果能够解决问题还麻烦给个赞
1.找到滚动穿透的mask蒙层或者是弹出框,去监听它的滚动(以mask为例,命名是react命名的,直接根据自己的框架转换命名就行)useEffect(()=>{
if (判断条件) {
document.getElementsByClassName('mask')[0].addEventListener('touchmove', () => {
document.getElementsByClassName('不想要发生滚动的那个document元素名')[0].style.overflow = "hidden";
}
}else{
document.getElementsByClassName('mask')[0].addEventListener('touchmove', () => {
document.getElementsByClassName('不想要发生滚动的那个document元素名')[0].style.overflow = "auto";
}
}
},[监听窗口的弹出与隐藏事件])
注意:document.getElementsByClassName(‘不想要发生滚动的那个document元素名’) ,一定要想清楚是想让哪个滚动的元素设置overflow,但是如果没有效果的话,可以换个元素再试一下