iScroll框架解析——Android 設備頁面內 div（容器，非頁面）overflow:scroll; 失效解決（轉）

移動平台的活，兼容問題超多，今兒又遇到一個。客戶要求在彈出層容器內顯示內容，但內容條數過多，容器顯示滾動條。按說是So easy，容器設死寬、高，CSS加屬性

完事！可拿設備去測的時候有趣了，Pc all browser正常，ios正常，android失效。泥馬在android下效果與 overflow:hidden;一樣，溢出部分隱藏了！

水平有限，用盡吃奶力各種解決未果，網上一頓亂搜，Google搜索有人說是android系統BUG，最后查到比較靠譜的解決是國外某高手開發了個JS庫，名曰iScroll 4 。親測，好用，唯獨效率不敢恭維（拿別人的東西用，少TM廢話）。下載地址：http://cubiq.org/iscroll-4

iscroll 需要兩個參數，第一個很簡單就是外容器的id,第二個參數是一個參數對象。通過這個對象可以傳入iscroll的各項參數來配置iscroll。
參數基本分為四個部分

-------------------------------------------俺混亂的分界線-----------------------------

iScroll框架解析（翻譯）

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 可能會有細微的變化。

使用指南

插件的調用需要在頁面完全加載之后。你可以通過以下3種方法來實現。

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元素

從上圖中可以看出，wrapper之於scroller，就像viewport之於document.

iScroll必須在調用之前實例化，你可以在下面幾種情況下對iScroll進行實例化(插件的調用需要在頁面完全加載之后)：

設置onDOMContentLoaded事件
設置onLoad事件
把調用代碼放到頁面的最后，以內聯inline方式

下面我們逐個來講講這三種用法的優缺點

1. ONDOMContentLoaded

適用：滾動區域的長寬是固定的，滾動內容只包含文字、圖片，並且所有的圖片都有固定的尺寸

使用方法：（在head標簽中添加如下代碼）

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

注意：myscroll這個變量是全局的，可以在任何時候調用插件，在任何地方調用它的函數

2. 設置onLoad事件

因為DOMContentLoaded事件是載入DOM結構后就會被調用，所以在圖片等元素未載入前可能無法確定滾動區域的長寬，此時可以使用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>

如上代碼，在頁面加載完100毫秒后調用插件。如果這個時間后還有元素未完全載入導致無法計算滾動區域長寬，可能會導致錯誤。但這是目前最好的方法了。

這種情況下iScroll會在頁面資源（包括圖片）加載完畢100ms之后得到初始化，這應該是一種比較安全的調用iScroll的方式。

3. inline初始化

這種情況會在頁面加載到js的時候就進行調用，此方法不推薦使用，但是很多javascript的大牛都在用這種方式，我又有什么理由不贊成呢？

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

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

-------------------------------------------俺混亂的分界線-----------------------------

iScroll參數設置

iScroll里的第二個參數允許你自定義一些內容，比如下面的這段代碼：

<script>
     var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
 </script>

第二個參數通常都是一個對象，像上面的這個例子里就設定了不顯示滾動條。常用的參數如下：

hScroll false 禁止橫向滾動 true橫向滾動默認為true
vScroll false 精致垂直滾動 true垂直滾動默認為true
hScrollbar false隱藏水平方向上的滾動條
vScrollbar false 隱藏垂直方向上的滾動條
fixedScrollbar 在iOS系統上，當元素拖動超出了scroller的邊界時，滾動條會收縮，設置為true可以禁止滾動條超出scroller的可見區域。默認在Android上為true， iOS上為false
fadeScrollbar false 指定在無漸隱效果時隱藏滾動條
hideScrollbar 在沒有用戶交互時隱藏滾動條默認為true
bounce 啟用或禁用邊界的反彈，默認為true
momentum 啟用或禁用慣性，默認為true，此參數在你想要保存資源的時候非常有用
lockDirection false取消拖動方向的鎖定， true拖動只能在一個方向上(up/down 或者left/right）為了保持資源的完整性，建議去除滾動條

-------------------------------------------俺混亂的分界線-----------------------------

各種效果的實現

1、拉動刷新（pull to refresh）

自從Twitter和一些Apple的本地化應用出現了這個效果之后，這個效果就變得非常流行。你可以看看這兒先一睹為快。我最近把"pull to refresh"這個部分單分出來作為iScroll的一個額外插件。你可以點擊這兒看看pull to refresh是如何工作滴。你只需要做的就是自定義pullDownAction()這個方法。你可能需要一個ajax來加載新的內容，不過一旦DOM樹發生了變化要記得調用refresh這個方法來。需要記住的是在例子中我們加了1秒的延遲來模擬網絡的延遲效果。當然，如果你不想使用這個延遲，那就把setTimeout方法去掉就行了。

2. 縮放(pinch / zoom)

我們不得不面對一個事實，那就是光有滾動其實沒什么新意的。這就是為什么在iScroll 4這個版本里我們允許你可以放大和縮小。想要這個功能，只需要設置放大的參數zoom 為true即可實現利用手勢來放大和縮小。你可以看看這兒。雙擊放大和縮小的功能在iScroll 4里也是得到支持的。要使用縮放功能，你至少需要如下配置：

var myScroll =new iScroll("wrapper",{zoom:true});

如果你想對縮放功能進行深度的自定義的話可以使用下面的一些選項：

zoomMax 指定允許放大的最大倍數，默認為4

【注意事項】：如果想要圖片縮放的效果很好的話要把他們放到硬件的合成層中。通俗點說，就是在所有需要縮放的img元素上使用-webkit-transform:translate3d(0,0,0)來實現，而且尤為重要的是，硬件的加速會占用大量資源，要謹慎使用，否則你的應用可能就此崩潰。

3. 捕捉元素（snap and snap to element）

SNAP功能是判斷元素是否滑動到指定位置。通過這個效果可以制作花哨的跑馬燈效果。插件會自動分析滾動區域內相同標簽或相同大小的元素做為捕捉對象，也可以通過參數指定捕捉的對象

捕捉的功能會促使scroller去重新定義位置，這樣可以制作更加花哨的傳送帶效果。點擊這里有個小例子。默認情況下，iScroll將scroller分成四分體，或者是相同大小的wrapper。iScroll 4加入了這個屬性允許捕捉scroller里的任何元素，不考慮外部wrapper的大小。如果你想要實現這樣的傳送帶效果，我建議你使用“quadrant”分割。最佳的設置如下：

 var myscroll=new iScroll("wrapper",{
                       snap:true,
                       momentum:false,
                       hScrollbar:false,
                       vScrollbar: false
});

可以通過設置snap參數為指定標簽來設定捕捉對象。比如捕捉li標簽

         var myscroll=new iScroll("wrapper",{
                      snap:"li",
                      momentum:false,
                      hScrollbar:false,
                      vScrollbar:false
        });

在這個例子中scroller可以捕捉到滾動區域中最左上角的li元素

在snap屬性的值為指定標簽的時候，插件會通過 scroller.querySelectorAll(snap_string)的方法來獲取對象。所以要注意不要寫成"$scroller li"，這是錯誤的。只要寫'li'。

3. 自定義滾動條（custom scrollbars）

在iScroll 4這個版本中，可以利用一系列的css來自定義滾動條的呈現。可以給滾動條添加一個class參數，如下：

                  var myscroll=new iScroll("wrapper",{scrollbarClass: "myScrollbar"});

你可以點擊這里看一個小例子，在這個小例子里，myScrollbarH這個類被添加到了水平滾動條上，myScrollbarV這個類則被添加給了垂直方向上的滾動條上了。需要提醒的是，滾動條是由兩個元素組合而成的：容器和顯示器。容器同wrapper的高度相同，而顯示器則代表的是滾動條本身。

滾動條的HTML結構如下：

<div class="myScrollbarV">
           <div></div>
 </div>

.myscrollbarV{
        position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;
}

 .myScrollbarV > div {
                           position:absolute;
                           z-index:100;
                           width:100%;
                             /* The following is probably what you want to customize */
                           background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
                           border:1px solid #800;
                          -webkit-background-clip:padding-box;
                          -webkit-box-sizing:border-box;
                          -webkit-border-radius:4px;
                          -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
                 }

內部方法：

iScroll還提供了一些公共方法。比如說refresh。在改變滾動區域里內容的時候都必須調用refresh方法。因為iScroll是通過實例化一個全局變量來實現的，所以使用者可在任何情況下調用這些方法。

調用方法： myScroll.name_of_the_function(參數)

refresh 在DOM樹發生變化時，應該調用此方法
scrollTo() 滾動到某個位置 eg: myscroll.scrollTo(0,10,200,true);
scrollToElement() 滾動到某個元素 eg: myscroll.scrollToElement("li:nth-child(10)",100);
detroy() 完全消除myscroll及其占用的內存空間 eg: myscroll.destroy()

iScroll需要知道滾動區域的大小和滾動條才能正常工作。在實例化的時候iScroll會自動計算一次。但如果滾動區域里的內容發生變化后，需要告訴iScroll內容發生了變化。

每次改變元素的高度/寬度或以任何方式修改（如： appendChild或innerHTML的）HTML結構時，瀏覽器會重新渲染頁面。javascript就需要重新分析新的DOM結構和新的屬性，有時候，這個不是即時的。

為了確保javascript分析新的頁面，可以實例化一個新的iScroll。

iScroll還提供了scrollTo, scrollToElement和scrollToPage三個方法讓你能夠通過javascript來控制滾動效果。

scrollTo(x, y, time, relative)：在指定的time時間內讓內容滾動條x/y的位置。如myScroll.scrollTo(0, -100, 200) 在200毫秒內Y軸向下滾動100像素。 myScroll.scrollTo(0, 10, 200, true)可以實現相對當前位置在200毫秒內Y軸向上滾動10像素的效果。

scrollToElement(element, time)：在指定的時間內滾動到指定的元素。如myScroll.scrollToElement('li:nth-child(10)', 100) 在100毫秒內滾動到第10個li元素的位置。第1個參數可以用CSS3中的選擇器來篩選元素。

snapToPage(pageX, pageY, time)：在200毫秒內從第1頁滾動到第2頁（0代表第1頁，1代表第2頁）。這個使用SNAP功能的時候可以調用這個函數。

如果你只希望在移動設備中使用iScroll，請使用iscroll-lite.js

LITE版是一個精簡版，它支持移動設備（沒有桌面兼容性）滾動。所占的資源更少。

iScroll框架解析——Android 設備頁面內 div（容器，非頁面）overflow:scroll; 失效解決（轉）

免責聲明！