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改变后自动刷新