移動端touch事件滾動

本來想用在北京歡樂谷手機上用touch事件來模擬局部左右內容滾動里，但在touchmove上下滾動時由於禁止了默認事件而body滾動條不能滾動，雖然可以根據touchmove的坐標來判斷方向，但體驗效果不理想。

后來在查詢相關資料后原來可以直接在css中使用overflow:auto;出來的滾動條用CSS3的-wekit-scrollbar{display:none}來隱藏;

*拓展
*::-webkit-scrollbar 滾動條整體部分
*::-webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）
*::-webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb）
*::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。
*::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
*::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
*::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件

 

touch事件來模擬局部左右內容滾動

判斷很簡單，touchmove的最后坐標減去touchstart的起始坐標，X的結果如果正數，則說明手指是從左往右划動；X的結果如果負數，則說明手指是從右往左划動；Y的結果如果正數，則說明手指是從上往下划動；Y的結果如果負數，則說明手指是從下往上划動。

 

if ( X > 0 ) {
    alert("left 2 right");
}
else if ( X < 0 ) {
    alert("right 2 left");
}
else if ( Y > 0) {
    alert("top 2 bottom");
}
else if ( Y < 0 ) {
    alert("bottom 2 top");
}
else{
    alert("just touch");
}

 

這再邏輯上沒有任何問題。但在實際操作中，手指的上下滑動其實是很難直上直下的，只要稍微有點斜，就會被X軸的判斷先行接管。
那么接下來加上特別的判斷技巧：增加的判斷也很簡單，無非就是判斷哪個的差值比較大。

if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
    alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
    alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
    alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
    alert("bottom 2 top");
}
else{
    alert("just touch");
}

 

code

function touchTable(){
    var moveTable = document.getElementById("showtime_bj");    //item_ID
    var $win =$(window);
    var tableWidth = moveTable.offsetWidth;   
    var halfWidth = tableWidth/2;
    var objTouches = null;
    var startx,starty,tableLeft,distx=0,disty=0;
    console.log(tableWidth)

    //綁定touchstart事件
    moveTable.addEventListener("touchstart",touchStart,false);
    function touchStart(e){
        objTouches = e.changedTouches[0];
        tableLeft = parseInt(moveTable.style.left)
        startx = parseInt(objTouches.pageX);
        starty = parseInt(objTouches.pageY);
        // document.body.addEventListener('touchmove', bodyScroll, false);
    }

    //綁定touchmove事件
    moveTable.addEventListener("touchmove",touchMove,false);
    function touchMove(e){
        objTouches = e.changedTouches[0];
        distx = parseInt(objTouches.pageX) - startx;
        disty = parseInt(objTouches.pageY) - starty;

        //判斷touch滑動的方向
        if (disty > 10 || disty < -10) {
            document.body.removeEventListener('touchmove', bodyScroll, false);          //向上向下滑動時恢復body的滾動條事件
        }else if (distx > 0 ||distx < 0) {
            document.body.addEventListener('touchmove', bodyScroll, false);             //向上向下滑動時取消body的滾動條事件
            moveTable.style.left = ((tableLeft + distx < -halfWidth) ? -halfWidth : (tableLeft + distx > 0) ? 0 : tableLeft + distx) + "px";
        }
    }
    //綁定touchend,touchcancel事件,當手指離開時事件
    moveTable.addEventListener("touchend touchcancel",touchEnd,false);
    function touchEnd(e){
        document.body.removeEventListener('touchmove', bodyScroll, false);              //恢復body的滾動條事件
    }

    function bodyScroll(e){ 
       e.preventDefault();
    }
}