HTML5 mobile development-rolling and inertia easing

1. three implementation methods are as follows: 1) use the native css Attribute overflow: scroll div id = parent style = overflow: scroll; divid = 'content' content area/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 to implement 2) js Programming Implementation ideas: change content element by moving the front and back positions on the screen

1. Scroll

There are three implementation methods:

1) use the native css Attribute overflow: scroll

<Id =>
<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

Parent = document. getElementById ();

Parent. addEventListener (, (e ){

});
Parent. addEventListener (, (e ){

});
Parent. addEventListener (, (e ){

});

Step 3: Implement rolling code

* Only vertical scrolling is implemented here.
*/
Parent = document. getElementById ();
Content = document. getElementById ()
StartY = 0;
LastY = 0;

Parent. addEventListener (, (e ){
LastY = startY = e. touches [0]. pageY;
});
Parent. addEventListener (, (e ){
NowY = e. touches [0]. pageY;
MoveY = nowY-lastY;
ContentTop = content. style. top. replace (,);

Content. style. top = (parseInt (contentTop) + moveY) +;
LastY = nowY;

});
Parent. addEventListener (, (e ){

NowY = e. touches [0]. pageY;
MoveY = nowY-lastY;
ContentTop = content. style. top. replace (,);

Content. style. top = (parseInt (contentTop) + moveY) +;
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.
*/
Parent = document. getElementById ();
Content = document. getElementById ()
StartY = 0;
LastY = 0;

* Variable used for easing
*/
LastMoveTime = 0;
LastMoveStart = 0;
StopInertiaMove =;

Parent. addEventListener (, (e ){
LastY = startY = e. touches [0]. pageY;

* Slow code
*/
LastMoveStart = lastY;
LastMoveTime = e. timeStamp |. now ();
StopInertiaMove =;
});
Parent. addEventListener (, (e ){
NowY = e. touches [0]. pageY;
MoveY = nowY-lastY;
ContentTop = content. style. top. replace (,);

Content. style. top = (parseInt (contentTop) + moveY) +;
LastY = nowY;

* Slow code
*/
NowTime = e. timeStamp |. now ();
StopInertiaMove =;
(NowTime-lastMoveTime> 300 ){
LastMoveTime = nowTime;
LastMoveStart = nowY;
}
});
Parent. addEventListener (, (e ){

NowY = e. touches [0]. pageY;
MoveY = nowY-lastY;
ContentTop = content. style. top. replace (,);
ContentY = (parseInt (contentTop) + moveY );

Content. style. top = contentY +;
LastY = nowY;

* Slow code
*/
NowTime = e. timeStamp |. now ();
V = (nowY-lastMoveStart)/(nowTime-lastMoveTime );
StopInertiaMove =;
(V, startTime, contentY ){
Dir = v> 0? -1: 1;
Deceleration = dir* 0.0006;
Duration = v/deceleration;
Dist = v * duration/2;
InertiaMove (){
(StopInertiaMove );
NowTime = e. timeStamp |. now ();
T = nowTime-startTime;
NowV = v + t * deceleration;

(Dir * nowV <;
}
MoveY = (v + nowV)/2 * t;
Content .. top = (contentY + moveY) + setTimeout (inertiaMove, 10 );
}
InertiaMove ();
}) (V, nowTime, contentY );
});

This article from zzm_justin blog, original address: http://blog.csdn.net/zzm_justin/article/details/8476373