有段時間一直折騰移動端頁面彈性滾動的各種問題，做了點研究，今天做個小分享~
傳統 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出現滾動條拖動顯示溢出的内容，而移動web開發中，由于浏覽器廠商的系統不同、版本不同，導緻有部分機型不支援對彈性滾動，進而在開發中制造了所謂的 bug。
上圖如果在pc端中，我們可以利用 position:fixed 和 overflow:auto 進行簡單的布局實作我們需要的效果，而在手機端遇到的問題如下：
ios4 和 android2.2 以下不支援 position:fixed
ios 和 android2.3 以下不支援 overflow:auto
ios4 和 android 不支援 overflow-scrolling
最嚴重的結果是：滾動區域内容無法拖動
布局一： 定義頁面整體高度為100%，然後使用 position:absolute 布局可解決
布局二： 定義頁面整體高度為100%，然後使用 display:flex 布局可解決
對于如何使用彈性滾動，這裡并沒有最好的方案，具體看産品的使用者群、産品的定位等，簡單介紹下：
方案一： overflow:auto和-webkit-overflow-scrolling: touch
适合場景：産品的使用者群大多為 ios5+、android4+ 使用者，建議采用 overflow-scrolling 做差異化體驗，畢竟 iscroll4.js 在 android 機器下體驗不順暢，另外還加載了 10k 多的 js 代碼。
overflow:auto 寫法在 winphone8 和 android4+ 上有用。ios5+ 版本增加了一個新的屬性：overflow-scrolling 這個屬性可以激活平滑滾動，效果不錯。
flex體驗demo：
<a href="http://1.peunzhang.sinaapp.com/demo/flex/flex-t-m-b.html" target="_blank">http://1.peunzhang.sinaapp.com/demo/flex/flex-t-m-b.html</a>
方案二： iscroll4.js和overflow:auto
适合場景：産品的使用者群有 ios 和大部分 android2+ 使用者，而在 android 中的頁面資料比較簡單(通常彈性滾動資料隻有文字)，那麼使用 iscroll4.js 可保證 android2+ 的機器展現正常也不卡頓，讓ios使用者滾動更順暢。
在 ios 系統上的表現十分良好，滾動順暢
在部分 android 系統上性能較差，特别是滾動區域内容多時，滾動頁面會出現卡頓
ios 和 android 系統下有不少 bug，如表單獲焦彈出軟鍵盤後頁面高度沒有重新計算、出現閃屏等(這裡不做讨論)
winphone 不支援
那麼這裡的處理方案是，頁面初始化時判斷是 weibit 浏覽器則啟用 iscroll4.js
winphone8 手機使用如下 hack
方案三： iscroll4.js和overflow:auto和android2x.css
适合場景：産品的使用者群有 ios 和大部分 android2+ 使用者，而在 android 中頁面資料比較複雜(通常彈性滾動資料有大量圖檔)，那麼可針對 android2+ 的機器做靜态定位展現(position:static)，頁面不具備滾動效果，而對于 ios 使用者仍然使用 iscroll4.js。
ok～
作者：白樹