手機端禁止瀏覽器左右滑動

在手機端vue項目中,禁止頁面左右滑動,代碼直接寫在index.html中html

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);vue

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};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling爲1時,表示縱向滑動,0爲橫向滑動
if(isScrolling === 0){
// alert(0);
event.preventDefault(); //阻止觸摸事件的默認行爲,即阻止滾屏
}
}, false);web

保證上下能夠滑動數組

相關文章
相關標籤/搜索