Ask for help on the moving end. After the finger slides up and down and releases, the element will slide a little distance inertia! !

  node.js, question
touchMoveSliderCateList = function(x, y){
 var $list = jqueryMap.$cateListUl,
 //Obtain the sliding distance of the user's finger
 offset = {
 x : x - stateMap.touchStartPos.x,
 y : y - stateMap.touchStartPos.y
 };
 
 $ list.css ('transform',' translate 3d' (0px,' add (offset.y-math.abs (statemap.listoffset)) plus' px, 0px');
 };

At present, I use the last position of tuchmove minus the starting position of touchstart to get the sliding distance of the user’s finger. during the user’s movement, I keep setting it on the element. it is no problem to move the element, but it feels too stiff. I hope that after my finger is released, I can move a little distance by inertia. how do I do it? ?

By dragging ul by hand, you can move different distances according to speed and inertia, and rebound beyond the range for reference ~

<script type="text/javascript">
 //Get Various Elements
 var nav = document.querySelector("nav");
 var navul = document.querySelector("nav ul");
 var navullis = document.querySelectorAll("nav ul li");
 var navW = parseInt(window.getComputedStyle(nav , null)['width']);
 
 //width
 Navul.style.width = navlis.length * 82 plus "px";
 
 nav.addEventListener("touchstart",touchstartHandler);
 nav.addEventListener("touchmove",touchmoveHandler);
 nav.addEventListener("touchend",touchendHandler);
 
 var startX;
 var nowX = 0;
 var dX;
 
 var lastTwoPoint = [0,0];
 
 //start sliding
 function touchstartHandler(event){
 navul.style.webkitTransition = "none";  //Remove transition
 navul.style.transition = "none";  //Remove transition
 startX = event.touches[0].pageX;  //Record starting point
 bracket
 
 //Sliding Process
 function touchmoveHandler(event){
 event.preventDefault();
 dX = event.touches[0].pageX - startX;  //difference
 
 //Reflect difference
 Navul.style.webkit transform = "translate x ("nowX plus dX plus "px)";
 Navul.style.transform = "translate x ("nowX plus dX plus "px)";
 
 //Record the X value of the last two points
 lastTwoPoint.shift();
 lastTwoPoint.push(event.touches[0].pageX);
 bracket
 
 //End slide
 function touchendHandler(event){
 NowX plus = dX;
 
 //Take five times more than the last two points.
 NowX Plus = (LastWoPoint [1]-LastWoPoint [0]) * 5;
 if(nowX > 0){
 nowX = 0;
 bracket
 
 If (nowx <-parseint (navul.style.width) plus navW){
 Nowx =-parseint (navul.style.width) plus navW;
 bracket
 
 Log (-navul.style.width plus navW)
 //transition time
 //nonlinear attenuation
 var t = Math.sqrt(Math.abs(lastTwoPoint[1] - lastTwoPoint[0])) / 10;
 
 Navul.style.webkit transition = "all" plus t plus "scubic-Bezier (0.1, 0.85, 0.25, 1) 0s";
 Navul.style.transition = "all "plus t plus" scubic-Bezier (0.1, 0.85, 0.25, 1) 0s ";
 
 //Reflect 5 times more distance traveled:
 Navul.style.webkit transform = "translate x (plus nowX plus" px) ";
 Navul.style.transform = "translate x (plus nowX plus" px) ";
 bracket
 </script>