移動web頁面支援彈性滾動的3個方案

傳統 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 布局可解決

/* header 彈性滾動區域 footer */html,body .header,.footer .header footer main

布局二：定義頁面整體高度為100%，然後使用 display:flex 布局可解決

/* header 彈性滾動區域 footer */html,body .wrap .header,.footer .main

那麼剩下的主要問題是子容器高度超出父容器高度，子容器內容如何彈性滾動。對於如何使用彈性滾動，這裡並沒有最好的方案，具體看產品的使用者群、產品的定位等，簡單介紹下：

方案一： overflow:auto和-webkit-overflow-scrolling: touch

overflow:auto 寫法在 winphone8 和 android4+ 上有用。ios5+ 版本增加了乙個新的屬性：overflow-scrolling 這個屬性可以啟用平滑滾動，效果不錯。

.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

...

winphone8 手機使用如下 hack

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)  /* winphone8 */
}

適合場景：如果產品的使用者群有 ios 和大部分 android2+ 使用者，而在 android 中的頁面資料比較簡單(通常彈性滾動資料只有文字)，那麼使用 iscroll4.js 可保證 android2+ 的機器展現正常也不卡頓，讓ios使用者滾動更順暢。

方案三： iscroll4.js和overflow:auto和android2x.css

如果產品的使用者群有ios和大部分android2+使用者，而在 android 中頁面資料比較複雜(通常彈性滾動資料有大量)，那麼可針對 android2+ 的機器做靜態定位展現(position:static)，頁面不具備滾動效果，而對於 ios 使用者仍然使用 iscroll4.js。

.css

...