Analysis of implementation methods of scrolling and inertial easing in JS+HTML5 mobile phone development-JS Tutorial-php.cn

Analysis of implementation methods of scrolling and inertial easing in JS+HTML5 mobile phone development

高洛峰

Release： 2017-02-17 17:14:05

Original

1681 people have browsed it

The example of this article describes the implementation method of scrolling and inertial easing in JS+HTML5 mobile phone development. Share it with everyone for your reference, the details are as follows:

1. The following are three implementation methods of scrolling:

1) Use the native css attribute overflow: scroll p id= parent style = overflow: scroll; pid='content' content area/p /p Notice: There is a bug in android. After scrolling, it will return to the top content area. The solution is to use the latter two methods to achieve

2) js programming implementation idea: compare the position changes before and after the finger moves on the screen to change the content element

1. Scroll

The following are three implementation methods:

1) Use native The css attribute overflow: scroll

<p id="parent" style="overflow:scroll;>
  <p id=&#39;content&#39;>内容区域</p>
</p>

Copy after login

Notice:

There is a bug in android. After scrolling, it will return to the top content area. , the solution is to use the latter two methods to achieve

2) js programming implementation

Idea: compare the position changes before and after the finger moves on the screen to change the position of the content element

The first step: Set the parent's overflow to hidden, set the content's position to relative, and top to 0;

The second step: Listen for touch events

var parent = document.getElementById(&#39;parent&#39;);
parent.addEventListener(&#39;touchstart&#39;, function(e) {
  // do touchstart
});
parent.addEventListener(&#39;touchmove&#39;, function(e) {
  // do touchmove
});
parent.addEventListener(&#39;touchend&#39;, function(e) {
  // do touchend
});

Copy after login

Step 3: Implement rolling code

/**
 * 这里只实现垂直滚动
 */
var parent = document.getElementById(&#39;parent&#39;);
var content = document.getElementById(&#39;content&#39;)
var startY = 0; // 初始位置
var lastY = 0; // 上一次位置
parent.addEventListener(&#39;touchstart&#39;, function(e) {
  lastY = startY = e.touches[0].pageY;
});
parent.addEventListener(&#39;touchmove&#39;, function(e) {
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
  // 设置top值移动content
  content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;
  lastY = nowY;
});
parent.addEventListener(&#39;touchend&#39;, function(e) {
  // do touchend
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
  // 设置top值移动content
  content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;
  lastY = nowY;
});

Copy after login

Step 4: Optimize

The above code runs better on mobile phones than on PC There are a lot of stuck

Please refer to the optimization part:

3) Use iScroll4 framework

var scroll = new iScroll(&#39;parent&#39;, {
hScrollbar: false,
vScrollbar: true,
checkDOMChanges : true
});

Copy after login

Framework official website: http: //www.php.cn/

2. Inertial easing

Idea: Take the average speed v of the finger swiping on the screen in the last period of time, and let v change according to a decreasing function, Until it cannot be moved or v<=0

/**
 * 这里只实现垂直滚动
 */
var parent = document.getElementById(&#39;parent&#39;);
var content = document.getElementById(&#39;content&#39;)
var startY = 0; // 初始位置
var lastY = 0; // 上一次位置
/**
 * 用于缓动的变量
 */
var lastMoveTime = 0;
var lastMoveStart = 0;
var stopInertiaMove = false; // 是否停止缓动
parent.addEventListener(&#39;touchstart&#39;, function(e) {
  lastY = startY = e.touches[0].pageY;
  /**
   * 缓动代码
   */
  lastMoveStart = lastY;
  lastMoveTime = e.timeStamp || Date.now();
  stopInertiaMove = true;
});
parent.addEventListener(&#39;touchmove&#39;, function(e) {
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
  // 设置top值移动content
  content.style.top = (parseInt(contentTop) + moveY) + &#39;px&#39;;
  lastY = nowY;
  /**
   * 缓动代码
   */
  var nowTime = e.timeStamp || Date.now();
  stopInertiaMove = true;
  if(nowTime - lastMoveTime > 300) {
    lastMoveTime = nowTime;
    lastMoveStart = nowY;
  }
});
parent.addEventListener(&#39;touchend&#39;, function(e) {
  // do touchend
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace(&#39;px&#39;, &#39;&#39;);
  var contentY = (parseInt(contentTop) + moveY);
  // 设置top值移动content
  content.style.top = contentY + &#39;px&#39;;
  lastY = nowY;
  /**
   * 缓动代码
   */
  var nowTime = e.timeStamp || Date.now();
  var v = (nowY - lastMoveStart) / (nowTime - lastMoveTime); //最后一段时间手指划动速度
  stopInertiaMove = false;
  (function(v, startTime, contentY) {
    var dir = v > 0 ? -1 : 1; //加速度方向
    var deceleration = dir*0.0006;
    var duration = v / deceleration; // 速度消减至0所需时间
    var dist = v * duration / 2; //最终移动多少
    function inertiaMove() {
      if(stopInertiaMove) return;
      var nowTime = e.timeStamp || Date.now();
      var t = nowTime-startTime;
      var nowV = v + t*deceleration;
      // 速度方向变化表示速度达到0了
      if(dir*nowV < 0) {
        return;
      }
      var moveY = (v + nowV)/2 * t;
      content.style.top = (contentY + moveY) + "px";
      setTimeout(inertiaMove, 10);
    }
    inertiaMove();
  })(v, nowTime, contentY);
});

Copy after login

I hope this article will be helpful to everyone in jQuery programming.

For more analysis on the implementation methods of scrolling and inertial easing in JS+HTML5 mobile phone development, please pay attention to the PHP Chinese website!