【原】使用iScroll.js解決ios4下不支持position:fixed的問題

一直折騰position:fixed在ios和android的使用，而事實上這么上流的ios4系統居然不支持position:fixed，幸運的是蘋果公司在ios5系統修復了這個bug，比較理想的解決方案是讓所有用戶把系統升級到ios5及以上版本，這種想法在國外還好，在國內環境下，因為越獄而不想去升級手機的人很多，如果強迫用戶去升級，那可能會把你的產品KS了。而你也不可能跟你老板說ios4什么不兼容那個屬性啊，讓用戶升級啊！老板看到的是結果，你做不出來，別人怎么做得出來呢，這樣你老板可能會對你的能力感到懷疑，或者認為你並不專業......那其實回到頭來我們還是乖乖去做好兼容，要么就找到完美的解決方案，誰讓可愛的用戶和親愛的老板是上帝呢，於是，我們淪落為苦逼的攻城獅~

ios3.2~4.3不支持position:fixed截圖如下，測試地址：http://caniuse.com/#search=position%3Afixed

今天的例子在這里了，如下圖我們可以看到，想在手機中實現如下的布局：頂部綠色導航始終固定在屏幕上方可視區域，低部綠色導航始終固定在屏幕下方可視區域，中間灰色區域模塊始終固定，模塊內容超出灰色區域時可以上下拖動，如下圖：

用固定定位的方法：position:fixed

HTML：

<header class="head">頂部固定區域</header>

<article class="main">
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
......
</article>

<footer class="foot">底部固定區域</footer>

CSS：

.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}
.head{top:0;}
.foot{bottom:0;}
.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}

測試地址：http://jsbin.com/aceyub/2，在手機中使用webkit內核的瀏覽器打開，正常顯示效果如下：

而在ios4系統中，當拖動灰色區域內容時，底部綠色固定區域被擠到可視屏幕外：

雖然自己是寫前端CSS方向，但偶爾了解js的對自己的開發效率提升和與js的合作中是有很大幫助的，一直折騰position:fixed在ios和android的使用，還寫了css的兼容方案，這次嘗試用強大的iScroll.js。

iScroll

穩定版本：iScroll4.js - 2012.07.14 - V4.2

最新版本：iScroll5.js - 2013.06.03 - V5 beta 1

文件大小：34K（YUI壓縮后26K，不用太擔心iScroll4體積大的問題）

系統兼容性： iphone/itouch> = 3.1.1，iPad> = 3.2，Android> = 1.6，火狐，Opera桌面/手機桌面的Webkit

官方簡述

iScroll 4 這個版本完全重寫了iScroll這個框架的原始代碼。這個項目的產生完全是因為移動版webkit瀏覽器（諸如iPhone，iPad，Android這些系統上廣泛使用）提供了一種本地化的方式來對一個限定了高度和寬度的元素的內容進行滑動。很不幸的是，這種情況下所有的web應用的頁面就不能夠包含具有position:absolute的頭、頁尾或者是一個內容可滾動的中間區域。

然而，Android系統最新修訂版已經可以支持這種功能了（盡管支持的力度還不是特別好），Apple公司似乎不太情願將one-finger滑動事件運用到div元素上。

除了以前版本的iScroll的特性以外，iScroll 4還包括如下的特性：

• 縮放（Pinch/Zoom）
• 拉動刷新（Pull up/down to refresh）
• 速度和性能提升
• 精確捕捉元素
• 自定義滾動條

 友情提示：iScroll 4並不是iScroll 3的簡易替代版本，API文檔已經不一樣了。同時考慮到此版本正處於測試期，一些API可能會有細微的變化。

官方使用指南

在此文檔中你會發現很多例子來教會你如何快速上手iScroll腳本庫。參看文中的demo小例子並仔細閱讀此文檔，可能有點小無聊，但是這篇文章中卻是iScroll這個腳本庫的精髓之所在哦。

iScroll需要對所要進行滾動的元素進行初始化，並且不限定一個頁面中使用iScroll的元素的個數（這里不考慮您的硬件配置）。滾動元素中內容的類型和長度在一定程度上將會影響iScroll腳本庫里可以同時使用的元素的個數。

使用iScroll這個腳本庫時，DOM樹的結構要足夠簡單，移除不必要的標簽，盡量避免過多的標簽嵌套使用。

最優的使用iScroll的結構如下所示：

<div id="wrapper">
        <ul>
               <li></li>

               .....
        </ul>
</div>

在這個小例子中，ul標簽將會被滾動。iScroll一定要與滾動內容外面的wrapper進行聯系才會產生效果。

【注意事項】：

只有wrapper里的第一個子元素才可以滾動，如果你想要更多的元素可以滾動，那么你可以試試下面的這種寫法：

<div id="wrapper">
        <div id="scroller">
               <ul>
                    <li></li>
                     ...
                </ul>
                <ul>
                     <li></li>
                      ...
                </ul>
       </div>
</div>

在這個例子中，scroller這個元素可以滾動，即便它包含兩個ul元素

iScroll必須在調用之前實例化，你可以在下面幾種情況下對iScroll進行實例化：

• onDOMContentLoaded
• onLoad
• 以內聯inline方式

下面我們逐個來講講這三種用法的優缺點
ONDOMContentLoaded
適用於滾動內容只包含文字、圖片，並且所有的圖片都有固定的尺寸
使用方法：（在head標簽中添加如下代碼）

<script src="iscroll.js"></script>
<script>
var myscroll;
function loaded(){
myscroll=new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>

注意：myscroll這個變量是全局的，因此你可以在任何地方調用它的函數
onLoad
有些時候在DOMContentLoaded的狀態下就初始化iScroll其實是有點草率的，因此此時頁面的資源可能還沒有全部加載
完畢。如果你遇到了一些很怪異的行為可以試試下面的寫法：

<script src="iscroll.js"><script>
<script>
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
}，100 );
}
window.addEventListener("load",loaded,false);
</script>

這種情況下iScroll會在頁面資源（包括圖片）加載完畢100ms之后得到初始化，這應該是一種比較安全的調用iScroll的方式。
inline初始化
這種情況會在頁面加載到js的時候就進行調用，此方法不推薦使用，但是很多javascript的大牛都在用這種方式

<script src="iscroll.js"></script>
<div id="wrapper">
<ul>
<li></li>
...
</ul>
</div>
<script>
var myscroll=new iScroll("wrapper");
</script>

不過建議你使用一些框架的ready方法來安全調用iScroll（比如jquery里的ready()）

以上一點iScroll4.js簡述和用法，來至百度百科的翻譯，iScroll4.js還有很多使用的方法如水平推動、定義滾動條等，詳細可查看ISCROLL4 簡述，官方地址：http://cubiq.org/iscroll-4

那么，對於我的問題，使用簡單的ONDOMContentLoaded實現，默認即是豎直拖動，代碼如下：

 HTML：

<header class="head">頂部固定區域</header>

<article class="main" id="wrapper">  這里id為wrapper iscroll里面定義好的 -->
<div><!--  可滾動區域 -->
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
<p>當內容欲出隱藏時，灰色區域可上下拖動</p>
......
</div>
</article>

<footer class="foot">底部固定區域</footer>

css：

:root ,body{height:100%;}/* 定義頁面內容為一屏展現 這2個標簽都必須設置高度100%  */
body{display:-webkit-box;display:box;-webkit-box-orient:vertical;}/* 定義頁面為彈性盒子模型 內容垂直布局  */
.head,.foot{height:38px;line-height:38px;width:100%;background-color:#99CC00;}
.main{width:100%;background-color:#BABABA;-webkit-box-flex:1;box-flex:1;overflow:hidden;}/* 定義該模塊的高度自動適應 占據頁面(除頭部和頂部)剩下的高度  */

javascript：

<script type="text/javascript" src="iscroll.js"></script>
 <script>
     var myscroll;
    function loaded(){
               myscroll=new iScroll("wrapper");
     }
   window.addEventListener("DOMContentLoaded",loaded,false);
</script>

這就是完美的解決方案啦，測試地址：http://jsbin.com/aceyub/7，支持ios4和android系統等，把這個地址丟入你的手機試試看吧！

iScroll.js對webapp開發來說是非常有使用價值，感謝CUBIQ.ORG，而iScroll5.js已經開始測試，期待下一個強大的版本~