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

1. 滾動 以下是三種實現方式： 1) 利用原生的css屬性 overflow: scroll div id= parent style = overflow:scroll; divid='content'內容區域/div /div notice: 在android 有bug, 滾動完後會回退到最頂端的內容區域，解決辦法是使用後兩種方式實現 2)js 程式設計實現 思路：對比手指在螢幕上移動前後位置變化改變內容元素content

1. 滾動

以下是三種實現方式：

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

<

div id=

"parent"

style=

"overflow:scroll;>

內容區域

notice:

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

2)js 程式設計實現

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

第一步：設定parent的 overflow為hidden, 設定content的position為relative, top為0;

第二步：監聽touch事件

var parent = document.getelementbyid(

'parent');

parent.addeventlistener(

'touchstart', 

function(e) );

parent.addeventlistener(

'touchmove', 

function(e) );

parent.addeventlistener(

'touchend', 

function(e) );

第三步：實現滾動**

/*** 這裡只實現垂直滾動

*/var parent = document.getelementbyid(

'parent');

var content = document.getelementbyid(

'content')

var starty = 0; 

// 初始位置

var lasty = 0; 

// 上一次位置

parent.addeventlistener(

'touchstart', 

function(e) );

parent.addeventlistener(

'touchmove', 

function(e) );

parent.addeventlistener(

'touchend', 

function(e) );

第四步：優化

上邊**在手機上執行效果相對pc上要卡很多

優化部分請參見:

3) 使用iscroll4框架

var scroll = new iscroll('parent', );

parent.addeventlistener(

'touchmove', 

function(e) 

});parent.addeventlistener(

'touchend', 

function(e) 

var movey = (v + nowv)/2 * t;

content.style.top = (contenty + movey) + 

"px"

;settimeout(inertiamove, 10);

}inertiamove();

})(v, nowtime, contenty);

});

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

1.滾動 以下是三種實現方式 1 利用原生的css屬性 overflow scroll 內容區域 notice 在android 有bug,滾動完後會回退到最頂端的內容區域，解決辦法是使用後兩種方式實現 2 js 程式設計實現 思路 對比手指在螢幕上移動前後位置變化改變內容元素content的位置 ...

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

以下是三種實現方式 1 利用原生的css屬性overflow scroll content 內容區域div div notice 在android有bug,滾動完後會回退到最頂端的內容區域，解決辦法是使用後兩種方式實現 2 js程式設計實現 思路 對比手指在螢幕上移動前後位置變化改變內容元素cont...

HTML5手機APP開發入 4

完成乙個自定義的component用來展現通訊錄使用者的明細資訊如下圖 涉及的知識點 component的定義，輸入 輸出 html 從 複製過來 使用關鍵字component，selector對應html tag，angular2 定義乙個component比angular 1要簡單的多 修改 d...