码迷,mamicode.com
首页 > 移动开发 > 详细

移动端禁止滚动

时间:2018-01-19 14:20:24      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:class   fun   获得   默认   屏幕   date   表示   eve   start   

var startPos = 0,endPos = 0,isScrolling = 0;
document.addEventListener(‘touchstart‘,function(event){
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
}, false);

//解绑事件 web前端开发
document.addEventListener(‘touchend‘,function(event){
document.removeEventListener(‘touchmove‘,this,false);
document.removeEventListener(‘touchend‘,this,false);
}, false);

document.addEventListener(‘touchmove‘,function(event){
//当屏幕有多个touch或者页面被缩放过,就不执行move操作
if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
// alert(Math.abs(endPos.x)+"----"+Math.abs(endPos.y));
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动
if(isScrolling === 0){
// event.preventDefault(); //阻止触摸事件的默认行为,即阻止滚屏
}
if(Math.abs(endPos.x) > 5){
event.preventDefault(); //横向滑动禁止
}
}, false);

// 禁止页面滚动
// document.body.addEventListener(‘touchmove‘, function (event) {
// event.preventDefault();
// }, true);

 

移动端禁止滚动

标签:class   fun   获得   默认   屏幕   date   表示   eve   start   

原文地址:https://www.cnblogs.com/hai-cheng/p/8316061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!