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

以下是三種實現方式：

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

'content'

>
內容區域div
>
div>

2)js程式設計實現

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

以下是三種實現方式：

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

'content'

>
內容區域div
>
div>

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

思路：對比手指在螢幕上移動前後位置變化改變內容元素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 =

newiscroll
('parent',)
;

思路：取手指最後一段時間在螢幕上划動的平均速度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))
;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.滾動 以下是三種實現方式 1 利用原生的css屬性 overflow scroll 內容區域 notice 在android 有bug,滾動完後會回退到最頂端的內容區域，解決辦法是使用後兩種方式實現 2 js 程式設計實現 思路 對比手指在螢幕上移動前後位置變化改變內容元素content的位置 ...

HTML5手機APP開發入 4

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