On the problem of finger sliding on the mobile end

structure: 

<div class="wrap">
    <div class="inner">   //touch
        //
          
    </div>
</div>

the height and width of wrap is fixed, and the width of inner is 100%

. 
//touchStart
var startY=event.pageY   //
//touchMove
var endY = event.pageY  //
var num = startY-endY   //

then set the transform:translateY (num) value of inner to slide up and down inner, but now I encounter a problem is how to determine the bottom / top of the slip stops sliding. I have tried that the offset of offsetTop relative to the parent element has no effect, it has always been 0 (but transform will not change this value? )
I hope all of you will give us some ideas and help with the confusion as you pass by. Thank you

.
Javascript
Mar.28,2021

Hello! Provide a way of thinking.
since you use translateY to slide up and down, you can use a variable to record the translateY value of the element, and the touchmove event adds the sliding distance of the phone to the original translateY. Here is a simple example that you can take a look at. Where css () is a function that sets and gets the value of the transform attribute. 

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

Previous: Vue introduces the local js file packaging error, but it is no problem to introduce the online version of js file in index.html?

Next: The width of the audio tag flashes

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu