移动端使用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()方法,即可实现想要的效果。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,025评论 3 119
  • 今天天很暖和,就是太阳不大好,我的侄子当兵,回家来探亲,昨晚一家人还有大哥家一家人,都聚在了我们家,孩子一放学就做...
    壮壮_2d73阅读 102评论 0 0
  • “哐镗......哐镗......”梦境一直在浮现。地铁站,浑浊的空气掩盖陌生人的慌张与迷茫。路口,风起,你白衣飘...
    若水无心一阅读 601评论 0 1
  • 此刻,房间里关了灯,外面电闪雷鸣,用另外一部手机放着“尺八”吹奏的「Up In The Sky」,苍凉而高远,仿佛...
    X_lei阅读 277评论 0 1
  • 一个人的你,是你曾经想要的生活,当你却没有过成你想要的一个人的生活。 原来不是你想要的爱情没有,而且你要的太多。 ...
    李红烨阅读 135评论 0 0