移动端滚动穿透问题

2019-08-21

背景是：弹出蒙版弹层（比如下拉筛选框）时，底部的被遮罩盖住的区域依然可以滚动。

解决方案是使用touchmove事件，在整个上面加preventDefault事件阻止触发，在蒙版上可点击的区域加stopPropagation阻止冒泡。

还有一个问题是在蒙版上最底部往下滑的时候和最顶部往上滑的时候仍然会触发，解决方案是判断在最底部的时候滑动方向，往下滑就阻止事件，往上放开；同理，最顶部往上禁止，往下放开。就需要判断滑动方向。参考https://www.haorooms.com/post/webapp_bodyslidebcdiv

还有一种思路是背景设置fixed（需注意记录打开时的滚动条位置），例

 this.yHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
document.body.style.position = 'fixed'
document.body.style.height = '100%'
document.body.style.width = '100%'
   // 关闭蒙层之后设置回原样
document.body.style.position = ''
document.body.style.height = ''
document.body.style.width = ''
window.scrollTo(0, this.yHeight)