在项目中遇到很多次滚动穿透问题，每一次都是看情况临时试解决方案能否可行，在这里统一总结一下
pc端model框弹出，下层内容禁止滚动
解决方案1：body添加禁止滚动类preventScroll
body.preventScroll{
height:100vh;
overflow:hidden
}
⚠️弊端：只在pc端有效，移动端不生效，并且原有的滚动条会因为overflow:hidden而消失
移动端model框弹出
解决方案2：model添加touchmove事件监听，禁止默认事件
model.addEventListener('touchmove',(e=>{
e.preventDefault();
},false)
⚠️弊端：只适用于model框没有滚动内容的情况
解决方案3：给body添加preventScroll禁止滚动类
body.preventScroll{
position:fixed,
height:100%,
}
⚠️弊端：body滚动条会消失，关闭model框时滚动条回到顶部
解决方案4：弹出model框时给body添加preventScroll禁止滚动类，记住滚动条所在位置，model框关闭时设置滚动条高度(兼容移动端和PC端)
body.preventScroll{
position:fixed,
height:100%,
}
openModel(){
//model框弹出，带过渡效果 this.showModel()
this.myscroll = document.documentElement.scrollTop || document.body.scrollTop
}
closeModel(){
//model框关闭，带过渡效果 this.showModel()
document.document.scrollTop = this.myscroll;
}
⚠️：这种方法是比较完善的，兼容pc和mobile的解决方案
案例3：model层滑动时，禁止body滑动，model上滑下滑到达临界点时，body可以根据情况上滑或下滑
网友评论