移動端iScroll

是一款用於移動設備web開發的一款插件。像縮放、下拉刷新、滑動切換等移動應用上常見的一些效果都可以輕鬆實現。

iScroll的最新版本是2011.07.03發佈的4.1.7版。最新版比以往更順暢，添加了更多的自定義事件，提供了更高級的可編程性。

使用方法：

DOM結構應儘量保持簡潔，避免過多的嵌套。滾動區域爲第一個子元素。html代碼：

?

1 2 3 4 5 6 7

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

上面的DOM結構中，ul將是滾動的區域。如果想同時滾動多個區域就要用一個容器把需要滾動的區域包起來。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

上面的DOM結構中，兩個UL會同時滾動。

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

• 設置onDOMContentLoaded事件
• 設置onLoad事件
• 把調用代碼放到頁面的最後。

使用onDOMContentLoaded事件實現滾動

如果滾動區域的長寬是固定的，就可以通過onDOMContentLoaded事件來實現滾動。

?

1 2 3 4 5 6 7 8

<script type="application/javascript" src="/Admin/News/edit/id/iscroll.js"></script> <script type="text/javascript">     var myScroll;     function loaded() {         myScroll = new iScroll('wrapper');     }     document.addEventListener('DOMContentLoaded', loaded, false); </script>

注意：變量myScroll是全局的，可以在任何時候調用插件。

使用onLoad事件實現滾動

因爲DOMContentLoaded事件是載入DOM結構後就會被調用，所以在圖片等元素未載入前可能無法確定滾動區域的長寬，此時可以使用onLoad事件來實現。

?

1 2 3 4 5 6 7 8 9 10

<script type="application/javascript"src="/Admin/News/edit/id/iscroll.js"></script> <script type="text/javascript">     var myScroll;     function loaded() {         setTimeout(function () {             myScroll = new iScroll('wrapper');         }, 100);     }     window.addEventListener('load', loaded, false); </script>

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

把調用的代碼放到最後

?

1 2 3 4 5 6 7 8 9 10

<div id="wrapper">     <ul>         <li></li>         ...         ...     </ul> </div> <script type="text/javascript"> var myScroll = new iScroll('wrapper'); </script>

很多javascript大師推薦用這種方法來實現一些需要先加載DOM的特效。因此，在此也可以使用這個方法。但插件開發者似乎並不推薦。因爲有可能會出現執行javascript之前沒有完全載入頁面元素，比如圖片。

ISCROLL參數設置

在實例化的時候可以通過傳遞第二個參數來設置一些效果。

?

1 2 3

<script type="text/javascript"> var myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false}); </script>

第2個參數是以對象的形式傳遞的。如上代碼中爲效果爲隱藏滾動條。參數如下：

• hScroll：無論內容是否超出顯示區域，都禁用水平方向的滾動條。默認情況下是水平和垂直方向同時出現的。
• vScroll：禁用垂直方向的滾動條。
• hScrollbar：隱藏水平方向的滾動條。
• vScrollbar：隱藏垂直方向的滾動條。
• fixedScrollbar：在IOS中拖動滾動條的時候可能會使內容（或滾動條，）縮小，設置該參數爲true可防止該現象。同樣適用於Android。Android默認爲true，IOS默認爲FALSE。
• hideScrollbar：在用戶沒有操作的時候是否隱藏滾動條。默認爲false
• fadeScrollbar：設置滾動條的談入談出效果。在hideScrollbar爲true的時候有效
• bounce：設置滾動條邊界的時候是否有反彈效果，默認爲true。
• momentum：設置是否開始慣性，關閉此效果可節省資源
• lockDirection：保持只在兩個方向上或滾動（上/下或左/右），在翻屏的時候可使用。不過我在Android上測試的時候似乎沒效果，不知道是我測試方法錯了還是怎麼回事。

 

各種效果的實現

滾動刷新

‘Pull to refresh’ demo

這個效果已經應用在Twitter app上和許多蘋果應用上使用。

最新版中，作者把滾動刷新和代碼複製的功能寫成了一個外部插件，可查看DEMO看它是如何工作的。

只需要定義一個pullDownAction()函數，通過ajax來調取數據，然後用refresh方法刷新DOM。請注意增加1秒的延遲來模擬網絡阻塞。

 

放大/縮小

‘Zoom’ example

通過這個插件，還可以實現滾動區域兩指縮放的效果。也可以通過雙擊來實現縮放。

在第二個參數加添加zoom參數爲true就可以實現，通過對zoomMax參數還可以控制縮放的倍數，最大值爲4倍

var myScroll = new iScroll(‘wrapper’, { zoom: true,zoomMax:4});

這個效果是通過硬件加速或使用webkit內核的 -webkit-transform:translate3d(0,0,0)的動畫CSS3屬性來實現。

注意：硬件加速需要消耗大量的資源，有可能會使系統崩潰。

 

SNAP和SNAP元素

‘Carousel’ demo

SNAP功能是判斷元素是否滑動到指定位置。通過這個效果可以製作花哨的跑馬燈效果。

插件會自動分析滾動區域內相同標籤或相同大小的元素做爲捕捉對象，也可以通過參數指定捕捉的對象

?

1 2 3 4 5

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

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

?

1 2 3 4 5

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

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

 

自定義滾動條

‘Custom scrollbars’ demo

iScroll插件允許你自定義滾動條的樣式。可以通過css定義一個class，並通過scrollbarClass屬性把class的名稱傳遞給iScroll就可以了。

myScroll = new iScroll(‘wrapper’, { scrollbarClass: ‘myScrollbar’ })

滾動條的DOM結構是一個class名爲myScrollBarV的外容器和一個指標組成。可以通過改變這兩個元素的樣式來自定義滾動條。

?

1 2 3

<div class="myScrollBarV"> <div></div> </div>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.myScrollbarV { position:absolute; z-index:100; width:8px;bottom:7px;top:2px;right:1px } .myScrollbarV > div {     position:absolute;     z-index:100;     width:100%;     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方法

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

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

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

?

1 2 3 4 5 6

ajax('page.php', onCompletion); function onCompletion () {     setTimeout(function () {         myScroll.refresh();     }, 0); };

JAVASCRIPT SCROLLING

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

通過調用destroy()函數下注銷iScroll來釋放內存。

myScroll.destroy(); myScroll = null;

LITE版iScroll

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

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

iScroll的發展方向

• 表單域的支持
• 縮放的優化
• 更好的桌面瀏覽器的兼容性
• onScrol事件的優化
• 加個哈希值的變化
• DOM改變後自動刷新