移动端禁止页面滑动

移动端禁止页面滑动

场景是这样滴~
一般H5活动 达到某一条件弹出提示 往往是遮罩层 用户在遮罩层上只能进行指定的操作 比如点击返回按钮等 不允许下层视图上下滑动

一般方式


var dom = document;//原谅我的强迫症……
//常见的代码如下
dom.body.style.overflow = "hidden";
或
dom.querySelector("html").style.overflow = "hidden";

这种方式你在chrome开发工具中模拟移动端视窗是没问题的 but 它也就是模拟个视窗 到真机上 安卓OK 但是 IOS挂了

事件阻止方式

这种方式的原理是监听touchmove事件 通知浏览器 别去响应touchmove事件

假设我们采用CMD组件的写法 当然你也可以随便用

两者结合


define(function(require,exports,module){
    var _eventPreventDefault = function(e){
        e.preventDefault();
    };
    module.exports = {
        disablePageScroll:function(){
            dom.querySelector("html").style.overflow = "hidden";
            dom.addEventListener("touchmove",_eventPreventDefault,false);
        },
        allowPageScroll:function(){
            dom.querySelector("html").style.overflow = "auto";
            dom.removeEventListener("touchmove",_eventPreventDefault,false);
        }
    }
})

推荐阅读更多精彩内容