html页面移动端滑不动,移动端禁止页面滑动

移动端禁止页面滑动

场景是这样滴~

一般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);

}

}

})