Analysis of Rolling and Inertial Retardation Implementation for JS+HTML5 Mobile Phone Development

This paper gives an example of rolling and inertia slowing in the development of JS+HTML5 mobile phone.Share it for your reference, as follows:

1. Scroll the following three ways:

1) Utilize the native css attribute overflow: scroll div id= parent style = overflow:scroll;divid='content'Content Area/div/div Notice: bug exists in android and falls back to the top content area after scrolling. The solution is to use the last two methods

2) Implementing ideas of js programming: Comparing changes of finger position before and after moving on screen, changing content element content

1. Scroll

There are three implementations:

1) Utilize the native css attribute overflow: scroll

<div id="parent" style="overflow:scroll;>
  <div id='content'> Content Area </div>
</div>

Notice:

bug exists in android, it will fall back to the top content area after scrolling, the solution is to use the last two ways to achieve

2) Programming implementation of js

Idea: Change the position of content element content by comparing the change of finger position before and after moving on the screen

Step 1: Set overflow for parent to hidden, position for content to relative and top to 0;

Step 2: Listen for touch events

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

Step 3: Implement scrolling code

/**
 *  Only vertical scrolling is possible here 
 */
var parent = document.getElementById('parent');
var content = document.getElementById('content')
var startY = 0; //  initial position 
var lastY = 0; //  upper 1 Secondary position 
parent.addEventListener('touchstart', function(e) {
  lastY = startY = e.touches[0].pageY;
});
parent.addEventListener('touchmove', function(e) {
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace('px', '');
  //  Set up top Value Move content
  content.style.top = (parseInt(contentTop) + moveY) + 'px';
  lastY = nowY;
});
parent.addEventListener('touchend', function(e) {
  // do touchend
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace('px', '');
  //  Set up top Value Move content
  content.style.top = (parseInt(contentTop) + moveY) + 'px';
  lastY = nowY;
});

Step 4: Optimize

The code above runs on a mobile phone with a lot of hassle compared to PC

For the optimization section, see:

3) Use the iScroll4 framework

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

Framework Offline: http://cubiq.org/iscroll-4

2. Inertial Retardation

Idea: Take the average speed v scrolled on the screen during the last period of your finger and let v change in a descending function until you can't move or v < =0

/**
 *  Only vertical scrolling is possible here 
 */
var parent = document.getElementById('parent');
var content = document.getElementById('content')
var startY = 0; //  initial position 
var lastY = 0; //  upper 1 Secondary position 
/**
 *  Variables for slow motion 
 */
var lastMoveTime = 0;
var lastMoveStart = 0;
var stopInertiaMove = false; //  Stop braking or not 
parent.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) {
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace('px', '');
  //  Set up top Value Move content
  content.style.top = (parseInt(contentTop) + moveY) + 'px';
  lastY = nowY;
  /**
   *  Slow Code 
   */
  var nowTime = e.timeStamp || Date.now();
  stopInertiaMove = true;
  if(nowTime - lastMoveTime > 300) {
    lastMoveTime = nowTime;
    lastMoveStart = nowY;
  }
});
parent.addEventListener('touchend', function(e) {
  // do touchend
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace('px', '');
  var contentY = (parseInt(contentTop) + moveY);
  //  Set up top Value Move content
  content.style.top = contentY + 'px';
  lastY = nowY;
  /**
   *  Slow Code 
   */
  var nowTime = e.timeStamp || Date.now();
  var v = (nowY - lastMoveStart) / (nowTime - lastMoveTime); // Last 1 Finger stroke speed over time 
  stopInertiaMove = false;
  (function(v, startTime, contentY) {
    var dir = v > 0 ? -1 : 1; // Acceleration direction 
    var deceleration = dir*0.0006;
    var duration = v / deceleration; //  Reduce speed to 0 Time required 
    var dist = v * duration / 2; // How much to move in the end 
    function inertiaMove() {
      if(stopInertiaMove) return;
      var nowTime = e.timeStamp || Date.now();
      var t = nowTime-startTime;
      var nowV = v + t*deceleration;
      //  Variation in speed direction indicates that speed has reached 0 Yes 
      if(dir*nowV < 0) {
        return;
      }
      var moveY = (v + nowV)/2 * t;
      content.style.top = (contentY + moveY) + "px";
      setTimeout(inertiaMove, 10);
    }
    inertiaMove();
  })(v, nowTime, contentY);
});

PS: Here are a few more code formatting and beautification tools recommended for you, I believe you will use them in the future development process:

Online JavaScript code beautification and formatting tools:
http://tools.ofstack.com/code/js

JavaScript Compression/Format/Encryption Tool:
http://tools.ofstack.com/code/jscompress

Online Format/Beautify/Compress/Edit/Convert Tool for json Code:
http://tools.ofstack.com/code/jsoncodeformat

Online JSON code inspection, inspection, beautification, formatting tools:
http://tools.ofstack.com/code/json

More readers interested in jQuery-related content can view this site's topics: jQuery Common Plug-ins and Usage Summary, Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Drag and Skills Summary, jQuery Extended Skills Summary, jQuery Common Classic Special Effects Summary, andjQuery Animation and Utility Summary and jquery Selector Usage Summary

I hope that the description in this paper will be helpful to everyone's jQuery program design.