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

時間 2019-12-01

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

原文原文鏈接

有段時間一直折騰移動端頁面彈性滾動的各類問題，作了點研究，今天作個小分享~css

傳統 pc 端中，子容器高度超出父容器高度，一般使用 overflow:auto 可出現滾動條拖動顯示溢出的內容，而移動web開發中，因爲瀏覽器廠商的系統不一樣、版本不一樣，致使有部分機型不支持對彈性滾動，從而在開發中製造了所謂的 BUG。html

上圖若是在PC端中，咱們能夠利用 position:fixed 和 overflow:auto 進行簡單的佈局實現咱們須要的效果，而在手機端遇到的問題以下：android

ios4 和 android2.2 如下不支持 position:fixed
ios 和 android2.3 如下不支持 overflow:auto
ios4 和 android 不支持 overflow-scrolling

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

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

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

/*
<!--absolute佈局 [[ -->
<body>
<div class="wrap">
    <div class="header">header</div>
    <div class="main">
     彈性滾動區域
    </div>
    <div class="footer">footer</div>
</div>
</body>
<!--absolute佈局 ]] -->
*/
html,body{height:100%;}
.wrap{width: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 佈局可解決github

/*
<!-- flex佈局 [[ -->
<body>
<div class="wrap">
      <div class="header">header</div>
      <div class="main">
       彈性滾動區域
      </div>
      <div class="footer">footer</div>
</div>
</body>
<!-- flex佈局 ]] -->
*/
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移動web開發

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

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

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

flex體驗demo：

http://peunzhang.github.io/demo/flex/flex-t-m-b.html

方案二： iscroll4.js和overflow:auto

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

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

在 ios 系統上的表現十分良好，滾動順暢
在部分 android 系統上性能較差，特別是滾動區域內容多時，滾動頁面會出現卡頓
ios 和 android 系統下有很多 bug，如表單獲焦彈出軟鍵盤後頁面高度沒有從新計算、出現閃屏等(這裏不作討論)
winphone 不支持

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

<div class="wap ie-ova" id=""><!-- webkit 用戶設置 ID 爲 iscroll，可啓用iscroll -->
    ...
</div>

winphone8 手機使用以下 hack

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

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

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

<link rel="stylesheet" href="android2x.css"><!-- android2+ 用戶多引用的css文件 -->

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

<div class="wap" id=""><!-- ios 用戶設置 ID 爲 iscroll，可啓用iscroll -->
    ...
</div>

ok～

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。