关于移动端手指滑动的问题

Question

结构：

<div class="wrap">
    <div class="inner">   //绑定touch三个事件
        //内容
          
    </div>
</div>

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

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

//touchMove事件
var endY = event.pageY  //获取最后滑动的值
var num = startY-endY   //获取手指滑动距离

再通过设置inner的transform：translateY(num)的值来实现inner的上下滑动，但是现在我碰到一个问题就是如何去判断滑倒底部/顶部停止滑动，我试了offsetTop相对于父元素的偏移没效果，一直是0（然道transform不会改变这个值？）
希望各位路过的给点思路，帮忙指点迷津，谢谢

Answer 1

你好！提供一种思路。
既然用translateY来做上下滑动，可以用变量记录元素的translateY值，touchmove事件中在原translateY基础上加上手机滑动的距离。下面是一个简单的例子，你可以看看。其中css()是设置及获取transform属性值的函数。

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;
    }
}