移动端使用e.preventDefault()禁止滚动及取消

相信大家写移动端的时候都会碰到这个问题,当写活动规则弹窗的时候如果页面过长了,即使规则是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()方法,即可实现想要的效果。

你可能感兴趣的:(移动端使用e.preventDefault()禁止滚动及取消)