有段時間一直折騰移動端頁面彈性滾動的各種問題，做了點研究，今天做個小分享~
傳統 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出現滾動條拖動顯示溢位的內容，而移動web開發中，由於瀏覽器廠商的系統不同、版本不同，導致有部分機型不支援對彈性滾動，從而在開發中製造了所謂的 bug。
上圖如果在pc端中，我們可以利用 position:fixed 和 overflow:auto 進行簡單的布局實現我們需要的效果，而在手機端遇到的問題如下：
ios4 和 android2.2 以下不支援 position:fixed
ios 不支援 overflow:auto
ios4 和 android2.3 以下以及不支援 overflow-scrolling
最嚴重的結果是：滾動區域內容無法拖動
對於 ios4 和 android2.2 以下不支援 position:fixed 的問題，有2種布局方法可以替代。
布局一： 定義頁面整體高度為100%，然後使用 position:absolute 布局可解決
view source
print?
01./*
02.
03.
04.header
05.
06.彈性滾動區域
07.
08.footer
09.
10.
11.*/
12.html,body
13..header,.footer
14..header
15..footer
16..main
布局二：定義頁面整體高度為100%，然後使用 display:flex 布局可解決
view source
print?
01./*
02.
03.
04.
05.header
06.
07.彈性滾動區域
08.
09.footer
10.
11.
12.
13.*/
14.html,body
15..wrap
16..header,.footer
17..main
那麼剩下的主要問題是子容器高度超出父容器高度，子容器內容如何彈性滾動。
對於如何使用彈性滾動，這裡並沒有最好的方案，具體看產品的使用者群、產品的定位等，簡單介紹下：
方案一： overflow:auto和-webkit-overflow-scrolling: touch
overflow:auto 寫法在 winphone8 和 android4+ 上有用。ios5+ 版本增加了乙個新的屬性：overflow-scrolling 這個屬性可以啟用平滑滾動，效果不錯。
view source
print?
1..css
適合場景：如果產品的使用者群大多為 ios5+、android4+ 使用者，建議採用 overflow-scrolling 做差異化體驗，畢竟 iscroll4.js 在 android 機器**驗不順暢，另外還載入了 10k 多的 js **。
方案二： iscroll4.js和overflow:auto
曾寫過【使用iscroll.js解決ios4下不支援position:fixed的問題】，使用 iscroll4.js 基本上解決了頁面彈性滾動的問題，總結下 iscroll4.js 的體驗：
在 ios 系統上的表現十分良好，滾動順暢 在部分 android 系統上效能較差，特別是滾動區域內容多時，滾動頁面會出現卡頓 ios 和 android 系統下有不少 bug，如表單獲焦彈出軟鍵盤後頁面高度沒有重新計算、出現閃屏等(這裡不做討論) winphone 不支援
那麼這裡的處理方案是，頁面初始化時判斷是 weibit 瀏覽器則啟用 iscroll4.js
view source
print?
1.
2....
3.
winphone8 手機使用如下 hack
view source
print?
1.@mediascreen and (-ms-high-contrast: active), (-ms-high-contrast: none)/* winphone8 */
3.}
適合場景：如果產品的使用者群有 ios 和大部分 android2+ 使用者，而在 android 中的頁面資料比較簡單(通常彈性滾動資料只有文字)，那麼使用 iscroll4.js 可保證 android2+ 的機器展現正常也不卡頓，讓ios使用者滾動更順暢。
方案三： iscroll4.js和overflow:auto和android2x.css
如果產品的使用者群有ios和大部分android2+使用者，而在 android 中頁面資料比較複雜(通常彈性滾動資料有大量)，那麼可針對 android2+ 的機器做靜態定位展現(position:static)，頁面不具備滾動效果，而對於 ios 使用者仍然使用 iscroll4.js。
view source
print?
1.
view source
print?
1..css
view source
print?
1.
2....
3.
移動web頁面支援彈性滾動的3個方案
傳統 pc 端中，子容器高度超出父容器高度，通常使用 overflow auto 可出現滾動條拖動顯示溢位的內容，而移動web開發中，由於 瀏覽器廠商的系統不同 版本不同，導致有部分機型不支援對彈性滾動，從而在開發中製造了所謂的 bug。上圖如果在pc端中，我們可以利用 position fixed...
web頁面移動端滾動失效問題
專案背景 angular7 echarts 4.8.0 開發的web專案。有乙個全是由各種圖表組成的頁面，在android10系統的手機上訪問頁面時，發現滑動介面不能正常的向下滾動，只有滑動非圖表區域的地方，才能滾動。但是在pc端和ios系統的手機,以及android5.1系統的手機上。頁面滾動時沒...
移動WEB的頁面布局
隨著移動網際網路的日益普遍，現在移動版本的web應用也應用而生，那麼在做移動web頁面布局的過程中，應該注意哪些要點呢？現把個人的一些學習經驗總結如下 1px 2dp dp dpr dpi ppi ios的viewport為980px 布局 layout viewport 檢視 visual vie...