相信大家写移动端的时候都会碰到这个问题,当写活动规则弹窗的时候如果页面过长了,即使规则是100%高度覆盖全屏但是如果在上面滑动还是可以拖动背景,有的时候为了更好地体验,我们往往需要在遮罩层存在的情况下干掉背景的滚动效果,而在取消遮罩层之后背景可以继续滑动。
移动端防止页面滚动代码(兼容苹果和安卓)
// 防止下拉
function touchmove () {
document.body.addEventListener('touchmove', function (e) {
e.preventDefault()
}, {passive: false})
}
遮罩层消失之后允许下拉
function untouchmove () {
document.body.addEventListener('touchmove', function (e) {
window.event.returnValue = true
})
}
在遮罩层弹出是调用touchmove()
方法,关闭遮罩层之后调用untouchmove()
方法,即可实现想要的效果。