HTML5手機開發——滾動和慣性緩動

　　1. 滾動css

　　如下是三種實現方式：android

　　1) 利用原生的css屬性 overflow: scroll編程

   < 
  div id= 
  "parent" 
   style= 
  "overflow:scroll;> 
  
     <div id='content'>內容區域</div> 
  
 </div> 
 

　　Notice:框架

　　在android 有bug, 滾動完後會回退到最頂端的內容區域，解決辦法是使用後兩種方式實現函數

　　2)js 編程實現優化

　　思路：對比手指在屏幕上移動先後位置變化改變內容元素content的位置spa

　　第一步：設置parent的 overflow爲hidden, 設置content的position爲relative, top爲0;.net

　　第二步：監聽touch事件blog

 
  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 
  
 });

　　第三步：實現滾動代碼事件

 
  /**
  * 這裏只實現垂直滾動
  */ 
  
  var parent = document.getElementById( 
  'parent'); 
  
  var content = document.getElementById( 
  'content') 
  
  var startY = 0;  
  // 初始位置 
  
  var lastY = 0;  
  // 上一次位置 
  
 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',  
  ''); 
  
  // 設置top值移動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',  
  ''); 
  
  // 設置top值移動content 
  
     content.style.top = (parseInt(contentTop) + moveY) +  
  'px'; 
  
     lastY = nowY; 
  
 });

　　第四步：優化

　　上邊代碼在手機上運行效果相對PC上要卡不少

　　優化部分請參見:

　　3) 使用iScroll4框架

　　var scroll = new iScroll('parent', {

　　hScrollbar: false,

　　vScrollbar: true,

　　checkDOMChanges : true

　　});

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

　　2.慣性緩動

　　思路：取手指最後一段時間在屏幕上划動的平均速度v，讓v按一個遞減函數變化，直到不能移動或v<=0

/**
  * 這裏只實現垂直滾動
  */
var parent = document.getElementById( 
  'parent'); 
  
var content = document.getElementById( 
  'content') 
  
var startY = 0;  
  // 初始位置
var lastY = 0;  
  // 上一次位置

/**
  * 用於緩動的變量
  */
var lastMoveTime = 0; 
  
var lastMoveStart = 0; 
  
var stopInertiaMove =  
  false;  
  // 是否中止緩動

 parent.addEventListener( 
  'touchstart',  
  function(e) { 
  
     lastY = startY = e.touches[0].pageY; 
  

/**
      * 緩動代碼
      */
     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',  
  ''); 
  
// 設置top值移動content
     content.style.top = (parseInt(contentTop) + moveY) +  
  'px'; 
  
     lastY = nowY; 
  

/**
      * 緩動代碼
      */
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); 
  
// 設置top值移動content
     content.style.top =  contentY +  
  'px'; 
  
     lastY = nowY; 
  

/**
      * 緩動代碼
      */
var nowTime = e.timeStamp ||  
  Date.now(); 
  
var v = (nowY - lastMoveStart) / (nowTime - lastMoveTime);  
  //最後一段時間手指划動速度
     stopInertiaMove =  
  false; 
  
     ( 
  function(v, startTime, contentY) { 
  
var dir = v > 0 ? -1 : 1;  
  //加速度方向
var deceleration = dir*0.0006; 
  
var duration = v / deceleration;  
  // 速度消減至0所需時間
var dist = v * duration / 2;  
  //最終移動多少
function inertiaMove() { 
  
if(stopInertiaMove)  
  return; 
  
var nowTime = e.timeStamp ||  
  Date.now(); 
  
var t = nowTime-startTime; 
  
var nowV = v + t*deceleration; 
  
// 速度方向變化表示速度達到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);
 });　　本文來自zzm_justin的博客，原文地址：http://blog.csdn.net/zzm_justin/article/details/8476373