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上測試的時候彷佛沒效果，不知道是我測試方法錯了仍是怎麼回事。
各類效果的實現
滾動刷新
這個效果已經應用在Twitter app上和許多蘋果應用上使用。
最新版中，做者把滾動刷新和代碼複製的功能寫成了一個外部插件，可查看DEMO看它是如何工做的。
只須要定義一個pullDownAction()函數，經過ajax來調取數據，而後用refresh方法刷新DOM。請注意增長1秒的延遲來模擬網絡阻塞。
放大/縮小
經過這個插件，還能夠實現滾動區域兩指縮放的效果。也能夠經過雙擊來實現縮放。
在第二個參數加添加zoom參數爲true就能夠實現，經過對zoomMax參數還能夠控制縮放的倍數，最大值爲4倍
這個效果是經過硬件加速或使用webkit內核的 -webkit-transform:translate3d(0,0,0)的動畫CSS3屬性來實現。
注意：硬件加速須要消耗大量的資源，有可能會使系統崩潰。
SNAP和SNAP元素
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’。
自定義滾動條
iScroll插件容許你自定義滾動條的樣式。能夠經過css定義一個class，並經過scrollbarClass屬性把class的名稱傳遞給iScroll就能夠了。
滾動條的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來釋放內存。
LITE版iScroll
若是你只但願在移動設備中使用iScroll，請使用iscroll-lite.js
LITE版是一個精簡版，它支持移動設備（沒有桌面兼容性）滾動。所佔的資源更少。
iScroll的發展方向
- 表單域的支持
- 縮放的優化
- 更好的桌面瀏覽器的兼容性
- onScrol事件的優化
- 加個哈希值的變化
- DOM改變後自動刷新