移动端禁止页面滑动
场景是这样滴~
一般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);
}
}
})
