HTML5 Mobile Phone development-rolling and inertia easing, html5 rolling inertia easing
1. Scroll
There 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:
If there is a bug in android, it will be rolled back to the top content area after rolling. The solution is to use the last two methods for implementation.
2) js programming implementation
Idea: change the content position of the content element by comparing the position changes before and after the finger moves on the screen
Step 1: Set the overflow of parent to hidden, set the position of 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 rolling 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 the 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 the content
Content. style. top = (parseInt (contentTop) + moveY) + 'px ';
LastY = nowY;
});
Step 4: Optimization
The above code runs on a mobile phone, which requires a lot of cards compared to the PC.
For the optimization section, see:
3) use the iScroll4 framework
Var scroll = new iScroll ('parent ',{
HScrollbar: false,
VScrollbar: true,
CheckDOMChanges: true
});
Framework Official Website: http://cubiq.org/iscroll-4
2. Inertia easing
Idea: Take the average speed v of the last part of the finger on the screen, and let v change according to a decreasing function until it cannot be moved 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 used 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;
/**
* 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 the top value to move the 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 the top value to move the content
Content. style. top = contentY + 'px ';
LastY = nowY;
/**
* Slow code
*/
Var nowTime = e. timeStamp | Date. now ();
Var v = (nowY-lastMoveStart)/(nowTime-lastMoveTime); // finger movement speed during the last period
StopInertiaMove = false;
(Function (v, startTime, contentY ){
Var dir = v> 0? -1: 1; // acceleration direction
Var deceleration = dir * 0.0006;
Var duration = v/deceleration; // time required for speed reduction to 0
Var dist = v * duration/2; // The number of final moves
Function inertiaMove (){
If (stopInertiaMove) return;
Var nowTime = e. timeStamp | Date. now ();
Var t = nowTime-startTime;
Var nowV = v + t * deceleration;
// If the speed direction changes, the speed reaches 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 );
});
