關(guān)于移動端手指滑動的問題

結(jié)構(gòu)：

<div class="wrap">
    <div class="inner">   //綁定touch三個事件
        //內(nèi)容
          
    </div>
</div>

wrap的高寬固定住，inner寬度100%

//touchStart事件
var startY=event.pageY   //獲取手指初始位置

//touchMove事件
var endY = event.pageY  //獲取最后滑動的值
var num = startY-endY   //獲取手指滑動距離

再通過設(shè)置inner的transform：translateY(num)的值來實現(xiàn)inner的上下滑動，但是現(xiàn)在我碰到一個問題就是如何去判斷滑倒底部/頂部停止滑動，我試了offsetTop相對于父元素的偏移沒效果，一直是0（然道transform不會改變這個值？）
希望各位路過的給點思路，幫忙指點迷津，謝謝

回答

編輯回答

深記你

你好！提供一種思路。
既然用translateY來做上下滑動，可以用變量記錄元素的translateY值，touchmove事件中在原translateY基礎(chǔ)上加上手機滑動的距離。下面是一個簡單的例子，你可以看看。其中css()是設(shè)置及獲取transform屬性值的函數(shù)。

var startPoint = 0;
var startEl = 0;
inner.addEventListener('touchstart', function(e) {
    startPoint = e.changedTouches[0].pageY;
    startEl = css(inner, 'translateY');
});
inner.addEventListener('touchmove', function(e) {
    var nowPoint = e.changedTouches[0].pageY;
    var dis = nowPoint - startPoint;
    var translateY = dis + startEl;
    css(inner, 'translateY', translateY);
});

function css(element, attr, val){
    if(!element.transform){
        element.transform = {};
    }    
    if(typeof val === "undefined"){ 
        if(typeof element.transform[attr] === "undefined"){
            switch(attr){
                case "scale":
                case "scaleX":
                case "scaleY":
                case "scaleZ":
                    element.transform[attr] = 100;
                    break;
                default:
                    element.transform[attr] = 0;    
            }
        } 
        return element.transform[attr];
    } else {
        element.transform[attr] = val;
        var transformVal  = "";
        for(var s in element.transform){
            switch(s){
                case "scale":
                case "scaleX":
                case "scaleY":
                case "scaleZ":
                    transformVal += " " + s + "("+(element.transform[s]/100)+")";
                    break;
                case "rotate":
                case "rotateX":
                case "rotateY":
                case "rotateZ":
                case "skewX":
                case "skewY":
                    transformVal += " " + s + "("+element.transform[s]+"deg)";
                    break;
                default:
                    transformVal += " " + s + "("+element.transform[s]+"px)";                
            }
        }
        element.style.WebkitTransform = element.style.transform = transformVal;
    }
}

2017年9月4日 12:51