Analysis of the implementation method of rolling and inertial easing in JS+HTML5 mobile phone development

This article describes the scrolling and inertial easing implementation methods for JS+HTML5 mobile phone development. Share it for your reference, as follows:

1. Scroll the following three implementation methods:

1) Use the native css attribute overflow: scroll div id= parent style = overflow:scroll; divid='content' content area/div /div Notice: There is a bug in android, and it will fall back to the top content area after scrolling. The solution is to use the latter two methods to implement it.

2) JS programming implementation idea: compare the position changes of the front and back of the fingers on the screen to change the content element content

1. Scroll

Here are three implementation methods:

1) Use the native css attribute overflow: scroll

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

Notice:

There is a bug in Android, and after scrolling, it will fall back to the top content area. The solution is to use the latter two methods to implement it

2) js programming implementation

Idea: Compare the position of the content element before and after the finger moves on the screen

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

Step 2: Listen to 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});parent.addEventListener('touchend', function(e) { // do touchend});

Step 3: Implement the scrolling code

 /** * Only vertical scrolling is implemented here*/var parent = document.getElementById('parent');var content = document.getElementById('content')var startY = 0; // Initial position var lastY = 0; // Last 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 the top value to 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 the top value to move content.style.top = (parseInt(contentTop) + moveY) + 'px'; lastY = nowY;});

Step 4: Optimization

The above code runs on the mobile phone and has a lot of stuck results.

For optimization, please see:

3) Use iScroll4 framework

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

Framework official website: http://cubiq.org/iscroll-4

2. Inertial easing

Idea: Take the average speed v of the fingers that swipe on the screen during the last period of time, and let v change according to a decreasing function until it cannot move or v<=0

 /** * Only vertical scrolling is implemented here*/var parent = document.getElementById('parent');var content = document.getElementById('content')var startY = 0; // Initial position var lastY = 0; // Last position/** * Variable for easing*/var lastMoveTime = 0;var lastMoveStart = 0;var stopInertiaMove = false; // Whether to stop easing parent.addEventListener('touchstart', function(e) { lastY = startY = e.touches[0].pageY; /** * easing 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 the top value to move content content.style.top = (parseInt(contentTop) + moveY) + 'px'; lastY = nowY; /** * easing 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 the top value to move content content.style.top = contentY + 'px'; lastY = nowY; /** * Easing code*/ var nowTime = e.timeStamp || Date.now(); var v = (nowY - lastMoveStart) / (nowTime - lastMoveTime); //The last period of time finger stroke speed stopInertiaMove = false; (function(v, startTime, contentY) { var dir = v > 0 ? -1 : 1; //The direction of acceleration var deceleration = dir*0.0006; var duration = v / deceleration; // The time required to reduce the speed to 0 var dist = v * duration / 2; //How much does the final move function inertiaMove() { if(stopInertiaMove) return; var nowTime = e.timeStamp || Date.now(); var t = nowTime-startTime; var nowV = v + t*deceleration; // Change in the velocity direction means that the speed has reached 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);});

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

Online JavaScript code beautification and formatting tools:

http://tools.VeVB.COM/code/js

JavaScript compression/formatting/encryption tools:

http://tools.VeVB.COM/code/jscompress

json code online formatting/beautification/compression/editing/converting tools:

http://tools.VeVB.COM/code/jsoncodeformat

Online JSON code verification, inspection, beautification and formatting tools:

http://tools.VeVB.COM/code/json

For more information about jQuery, please visit this site's special topics: "Summary of common plug-ins and usages of jQuery", "Summary of Ajax usage in jquery", "Summary of jQuery table (table) operation skills", "Summary of jQuery drag and drop effects and techniques", "Summary of jQuery extension skills", "Summary of common classic special effects of jQuery", "Summary of jQuery animation and special effects usages" and "Summary of jQuery selector usages"

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