官网:http://cubiq.org/iscroll-5
demo:
滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

’Carousel’ demo

iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项。
一、用法
iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数。
使用iScroll时,DOM树的结构要足够简单,移除不必要的标签,避免过多的标签嵌套。
1、html部分
1.1、最优最简单的iScroll结构
<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div> 本例中,ul标签将被滚动。iScroll一定要与滚动内容外的wrapper配合才能生效。
1.2、只有wrapper里的第一个子元素才可以滚动
因为只有wrapper里的第一个子元素才科院滚动,所以要让多个元素滚动 ,写法如下:
<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
</div>
</div> scroller这个元素可以滚动,即便它包含两个ul元素。
2、js调用部分
2.1 、使用onDomContentLoaded事件实现滚动
适用于滚动内容只包含文字、图片,并且所有的图片都有固定的尺寸
<script src="iscroll.js"></script>
<script>
var myscroll; //myscroll是全局变量,可以在任意地方调用
function loaded(){
myscroll=new iScroll("wrapper");
} window.addEventListener("DOMContentLoaded",loaded,false);
</script> 2.2、使用onLoad事件实现滚动
因为DOMContentLoaded事件是载入DOM结构后就会被调用,所以在图片等元素未载入前可能无法确定滚动区域的长宽,此时可以使用onLoad事件来实现。
<script src="iscroll.js"><script>
<script>
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
},100 );
}
window.addEventListener("load",loaded,false);
</script> 这种情况下iScroll会在页面资源(包括图片)加载完毕100ms之后得到初始化,这应该是一种比较安全的调用iScroll的方式。
2.3、弹框中的滚动条加载
弹框一般用display:none和display:block切换来实现。
display:none的元素浏览器没有渲染,所以无法计算滚动内容的高度。










