HTML5手机开发——滚动和惯性缓动

1. 滚动

以下是三种实现方式：

1） 利用原生的css属性 overflow: scroll

[html]  view plain copy

 

1. <div id="parent" style="overflow:scroll;>  
2.     <div id='content'>内容区域</div>  
3. </div>  

Notice: 

在android 有bug, 滚动完后会回退到最顶端的内容区域，解决办法是使用后两种方式实现

2）js 编程实现 

思路：对比手指在屏幕上移动前后位置变化改变内容元素content的位置

 

第一步：设置parent的 overflow为hidden, 设置content的position为relative, top为0；

第二步：监听touch事件

[javascript]  view plain copy

 

1. var parent = document.getElementById('parent');  
2.   
3. parent.addEventListener('touchstart', function(e) {  
4.     // do touchstart  
5. });  
6. parent.addEventListener('touchmove', function(e) {  
7.     // do touchmove  
8. });  
9. parent.addEventListener('touchend', function(e) {  
10.     // do touchend  
11. });  

第三步：实现滚动代码

[javascript]  view plain copy

 

1. /** 
2.  * 这里只实现垂直滚动 
3.  */  
4. var parent = document.getElementById('parent');  
5. var content = document.getElementById('content')  
6. var startY = 0; // 初始位置  
7. var lastY = 0; // 上一次位置  
8.   
9. parent.addEventListener('touchstart', function(e) {  
10.     lastY = startY = e.touches[0].pageY;  
11. });  
12. parent.addEventListener('touchmove', function(e) {  
13.     var nowY = e.touches[0].pageY;  
14.     var moveY = nowY - lastY;  
15.     var contentTop = content.style.top.replace('px', '');  
16.     // 设置top值移动content  
17.     content.style.top = (parseInt(contentTop) + moveY) + 'px';  
18.     lastY = nowY;  
19.   
20. });  
21. parent.addEventListener('touchend', function(e) {  
22.     // do touchend  
23.     var nowY = e.touches[0].pageY;  
24.     var moveY = nowY - lastY;  
25.     var contentTop = content.style.top.replace('px', '');  
26.     // 设置top值移动content  
27.     content.style.top = (parseInt(contentTop) + moveY) + 'px';  
28.     lastY = nowY;  
29. });  

第四步：优化

上边代码在手机上运行效果相对PC上要卡很多

优化部分请参见:

 

 

3) 使用iScroll4框架

[javascript]  view plain copy

 

1. var scroll = new iScroll('parent', {  
2.     hScrollbar: false,  
3.     vScrollbar: true,  
4.     checkDOMChanges : true  
5. });  

框架官网： http://cubiq.org/iscroll-4

 

2.惯性缓动

思路：取手指最后一段时间在屏幕上划动的平均速度ｖ，让ｖ按一个递减函数变化，直到不能移动或ｖ＜＝０

 

 

[javascript]  view plain copy

 

1. /** 
2.  * 这里只实现垂直滚动 
3.  */  
4. var parent = document.getElementById('parent');  
5. var content = document.getElementById('content')  
6. var startY = 0; // 初始位置  
7. var lastY = 0; // 上一次位置  
8.   
9. /** 
10.  * 用于缓动的变量 
11.  */  
12. var lastMoveTime = 0;  
13. var lastMoveStart = 0;  
14. var stopInertiaMove = false; // 是否停止缓动  
15.   
16. parent.addEventListener('touchstart', function(e) {  
17.     lastY = startY = e.touches[0].pageY;  
18.   
19.     /** 
20.      * 缓动代码 
21.      */  
22.     lastMoveStart = lastY;  
23.     lastMoveTime = e.timeStamp || Date.now();  
24.     stopInertiaMove = true;  
25. });  
26. parent.addEventListener('touchmove', function(e) {  
27.     var nowY = e.touches[0].pageY;  
28.     var moveY = nowY - lastY;  
29.     var contentTop = content.style.top.replace('px', '');  
30.     // 设置top值移动content  
31.     content.style.top = (parseInt(contentTop) + moveY) + 'px';  
32.     lastY = nowY;  
33.   
34.     /** 
35.      * 缓动代码 
36.      */  
37.     var nowTime = e.timeStamp || Date.now();  
38.     stopInertiaMove = true;  
39.     if(nowTime - lastMoveTime > 300) {  
40.         lastMoveTime = nowTime;  
41.         lastMoveStart = nowY;  
42.     }  
43. });  
44. parent.addEventListener('touchend', function(e) {  
45.     // do touchend  
46.     var nowY = e.touches[0].pageY;  
47.     var moveY = nowY - lastY;  
48.     var contentTop = content.style.top.replace('px', '');  
49.     var contentY = (parseInt(contentTop) + moveY);  
50.     // 设置top值移动content  
51.     content.style.top =  contentY + 'px';  
52.     lastY = nowY;  
53.   
54.     /** 
55.      * 缓动代码 
56.      */  
57.     var nowTime = e.timeStamp || Date.now();  
58.     var v = (nowY - lastMoveStart) / (nowTime - lastMoveTime); //最后一段时间手指划动速度  
59.     stopInertiaMove = false;  
60.     (function(v, startTime, contentY) {  
61.         var dir = v > 0 ? -1 : 1; //加速度方向  
62.         var deceleration = dir*0.0006;  
63.         var duration = v / deceleration; // 速度消减至0所需时间  
64.         var dist = v * duration / 2; //最终移动多少  
65.         function inertiaMove() {  
66.             if(stopInertiaMove) return;  
67.             var nowTime = e.timeStamp || Date.now();  
68.             var t = nowTime-startTime;  
69.             var nowV = v + t*deceleration;  
70.             // 速度方向变化表示速度达到0了  
71.             if(dir*nowV < 0) {  
72.                 return;  
73.             }  
74.             var moveY = (v + nowV)/2 * t;  
75.             content.style.top = (contentY + moveY) + "px";  
76.             setTimeout(inertiaMove, 10);  
77.         }  
78.         inertiaMove();  
79.     })(v, nowTime, contentY);  
80. });  

 

转自：http://blog.csdn.net/zzm_justin/article/details/8476373