iScroll5的入门
iSroll5用着确实不错，做混合app的首选，能给项目添加不少效果。iScroll 不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅 4kb 大小的 iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。
你可以用它实现上拉加载和下拉刷新的效果，也可以实现懒加载的效果，也可以用来做横向滚动的幻灯片效果。
先从最简单的结构说起吧
<pre name="code" class="html"><span style="font-size:14px;"><div id="wrapper"> <div id="scroller"> <ul> <li>...</li> <li>...</li> ... </ul> </div> </div</span>把上面的代码添加进你的html文件中就可以了，当然我们还得写一些JS代码
<span style="font-size:14px;"><script>
var myScroll = new IScroll('#wrapper');
</script></span>
在这里我们新创建了一个iSroll对象，值得注意的是在iScroll5中new新对象的时候使用的是IScroll，和4中的是有区别的。另外需要注意的是iScroll只会选取第一个子标签作为滑动的内容，也就是说上面html代码中如果id=scroller的div标签有其他兄弟标签的话那iScroll还是会选择第一个作为滚动内容。完整代码如下：在这里想说的是上面代码是在onload之后初始化的iScroll，如果我们的内容数据比较多，或者我们的页面上有用ajax异步获取数据的地方，那么你会发现我们的这个iScroll能滚动的只是整个页面的一部分，原因之后再讲。
<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
</script>
</head>
<body onload="loaded()">
<div id="wrapper">
<div id="scroller">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
</div>
</body>
</html>
有时候我们在初始化iScroll的时候需要配置一些参数，例如：
<span style="font-size:14px;">var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
});</span>
上面的例子示例了在 iScroll 初始化时开启鼠标滚轮支持和滚动条支持。
类似的参数还有：
myScroll = new IScroll('#wrapperSale', {
preventDefault:false,//为true就是阻止事件冒泡
click: true,//允许点击操作，在做app特别有用
probeType: 3,//表明此插件，可以监听scroll事件
scrollX: true,//同意在X方向上滚动
scrollY: true,//同意在Y方向上滚动
momentum: true,//允许惯性效果
snap: true//分页效果,滚动不需要,但是在做幻灯片时需要
})当然不止上面这些属性，其他还有一些，以后讲到专门用到这些属性的时候再细细分析
更多配置请查看：iScroll5中文API
这篇讲解的比较浅显，主要是简单的结构是各种iScroll应用场景的基础，都是在其基础上添加相应的代码
下一篇：用iScroll5实现幻灯片效果