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

1. 滾動

以下是三種實現方式：

1) 利用原生的css屬性 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 div id parent style overflow scroll divid content 內容區域 div div notice 在android 有bug,滾動完後會回退到最頂端的內容區域，解決辦法是...

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...