Idea: The average speed at which the last stroke of the finger is scratched on the screen, let v change by a decreasing function until it cannot be moved or v<=0
/** * Only vertical scrolling is possible here*/ varParent = document.getElementById (' Parent '); varContent = document.getElementById (' content ') varStarty = 0;//Initial Positionvarlasty = 0;//last position /** * variable for easing*/ varLastmovetime = 0; varLastmovestart = 0; varStopinertiamove =false;//whether to stop easingParent.addeventlistener (' Touchstart ',function(e) {lasty= Starty = E.touches[0].pagey; /** * Slow code*/Lastmovestart=lasty; Lastmovetime= E.timestamp | |Date.now (); Stopinertiamove=true; }); Parent.addeventlistener (' Touchmove ',function(e) {varNowy = E.touches[0].pagey; varMovey = Nowy-lasty; varContenttop = content.style.top.replace (' px ', ' '); //set top value move contentContent.style.top = (parseint (contenttop) + Movey) + ' px '; Lasty=Nowy; /** * Slow code*/ varNowtime = E.timestamp | |Date.now (); Stopinertiamove=true; if(Nowtime-lastmovetime > 300) {Lastmovetime=Nowtime; Lastmovestart=Nowy; } }); Parent.addeventlistener (' Touchend ',function(e) {//Do touchend varNowy = E.touches[0].pagey; varMovey = Nowy-lasty; varContenttop = content.style.top.replace (' px ', ' '); varContenty = (parseint (contenttop) +Movey); //set top value move contentContent.style.top = contenty + ' px '; Lasty=Nowy; /** * Slow code*/ varNowtime = E.timestamp | |Date.now (); varv = (nowy-lastmovestart)/(Nowtime-lastmovetime);//last period of time finger paddling speedStopinertiamove =false; (function(V, startTime, Contenty) {vardir = v > 0? -1:1;//Acceleration Direction vardeceleration = dir*0.0006; varDuration = v/deceleration;//speed reduction to 0 time required varDist = v * DURATION/2;//How much is the final move functionInertiamove () {if(Stopinertiamove)return; varNowtime = E.timestamp | |Date.now (); vart = nowtime-StartTime; varNOWV = v + t*deceleration; //the speed direction changes to 0. if(DIR*NOWV < 0) { return; } varMovey = (v + NOWV)/2 * t; Content.style.top = (Contenty + movey) + "px"; SetTimeout (Inertiamove,10); } inertiamove (); }) (V, Nowtime, contenty); });
JavaScript inertia easing implementation