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

時間 2019-11-06

標籤移動 web 頁面支持彈性滾動方案欄目無線简体版

原文原文鏈接

position:fixed 和 overflow:auto 進行簡單的佈局實現咱們須要的效果，而在手機端遇到的問題以下： css

ios4 和 android2.2 如下不支持 position:fixed

ios 不支持 overflow:auto

ios4 和 android2.3 如下以及不支持 overflow-scrolling

最嚴重的結果是：滾動區域內容沒法拖動 html

對於 ios4 和 android2.2 如下不支持 position:fixed 的問題，有2種佈局方法能夠替代。

佈局一：定義頁面總體高度爲100%，而後使用 position:absolute 佈局可解決 android

/*<body> <div class="header">header</div> <div class="main"> 彈性滾動區域 </div> <div class="footer">footer</div></body>*/html,body{height:100%;}.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}.header{position: absolute;top:0;left:0;width:100%;}.footer{position: absolute;bottom:0;left:0;width:100%;}.main{position:absolute;z-index:1;top:40px;left:0;bottom:40px;width:100%;}

佈局二： 定義頁面總體高度爲100%，而後使用 display:flex 佈局可解決 ios

/*<body><div class="wrap"> <div class="header">header</div> <div class="main"> 彈性滾動區域 </div> <div class="footer">footer</div></div></body>*/html,body{height:100%;}.wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;}.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}.main{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;}

那麼剩下的主要問題是子容器高度超出父容器高度，子容器內容如何彈性滾動。

對於如何使用彈性滾動，這裏並無最好的方案，具體看產品的用戶羣、產品的定位等，簡單介紹下： web

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

overflow:auto 寫法在 winphone8 和 android4+ 上有用。ios5+ 版本增長了一個新的屬性：overflow-scrolling 這個屬性能夠激活平滑滾動，效果不錯。佈局

.css{overflow:auto;/* winphone8和android4+ */-webkit-overflow-scrolling: touch; /* ios5+ */}

適合場景：若是產品的用戶羣大多爲 ios5+、android4+ 用戶，建議採用 overflow-scrolling 作差別化體驗，畢竟 iscroll4.js 在 android 機器下體驗不暢，另外還加載了 10K 多的 js 代碼。性能

方案二： iscroll4.js和overflow:auto flex

曾寫過【使用iScroll.js解決ios4下不支持position:fixed的問題】，使用 iscroll4.js 基本上解決了頁面彈性滾動的問題，總結下 iscroll4.js 的體驗： flexbox

在 ios 系統上的表現十分良好，滾動順暢

在部分 android 系統上性能較差，特別是滾動區域內容多時，滾動頁面會出現卡頓

ios 和 android 系統下有很多 bug，如表單獲焦彈出軟鍵盤後頁面高度沒有從新計算、出現閃屏等(這裏不作討論)

winphone 不支持

那麼這裏的處理方案是，頁面初始化時判斷是 weibit 瀏覽器則啓用 iscroll4.js

<div class="wap ie-ova" id=""> ...</div>

winphone8 手機使用以下 hack

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ie-ova{overflow:auto;} /* winphone8 */}

適合場景：若是產品的用戶羣有 ios 和大部分 android2+ 用戶，而在 android 中的頁面數據比較簡單(一般彈性滾動數據只有文字)，那麼使用 iscroll4.js 可保證 android2+ 的機器展示正常也不卡頓，讓ios用戶滾動更順暢。

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

若是產品的用戶羣有ios和大部分android2+用戶，而在 android 中頁面數據比較複雜(一般彈性滾動數據有大量圖片)，那麼可針對 android2+ 的機器作靜態定位展示(position:static)，頁面不具有滾動效果，而對於 ios 用戶仍然使用 iscroll4.js。

<link rel="stylesheet" href="android2x.css">

.css{overflow:auto;/* winphone8和android4+ */}

<div class="wap" id=""> ...</div>