官方网站：http://cubiq.org/iscroll-5

demo:

滚动更新：http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/.

旋转木马演示

IScroll非常强大。目前我只用它来定制滚动条。下面简单介绍在移动端自定义滚动条时，iscoll的使用和注意事项。

一、用法。

IScroll初始化要滚动的元素，并且不限制页面中使用is croll的元素数量。

使用iScroll时，DOM树的结构应该足够简单，以去除不必要的标签，避免过多的标签嵌套。

1.html部分。

1.1.最好最简单的iScroll结构。

Div id=' wrapper' ulli/li./ul/div在本例中，ul标签将被滚动。IScroll必须与滚动内容之外的包装器合作才能生效。

1.2.只有包装中的第一个子元素可以滚动。

因为科学院只滚动包装器中的第一个子元素，所以多个元素应该按如下方式滚动：

div id=' wrapper ' div id=' scroller ' ulli/Li./ululli/li./ul/div/div滚动条即使包含两个ul元素，也可以滚动该元素。

2.js调用部分。

2.1.使用onDomContentLoaded事件滚动。

适用于只包含文字和图片，所有图片大小固定的滚动内容。

script src=' http : iscroll . js '/script script var myscroll；//myscroll是一个全局变量，可以在任何地方调用functionloaded(){ myscroll=new ishcroll(' wrapper ')；} window . addeventlistener(' DOMContentLoaded '，Loaded，false)；/script 2.2，使用onLoad事件实现滚动。

因为DOMContentLoaded事件是在加载DOM结构之后调用的，所以在加载图片等元素之前可能无法确定滚动区域的长度和宽度，所以可以使用onLoad事件来实现这一点。

script src=' http : iscroll . js ' script script var myscroll；函数loaded(){ setTimeout(function(){ myscroll=new iScroll(' wrapper ')；},100 );}window.addEventListener('load '，loaded，false)；/script在这种情况下，在加载页面资源(包括图片)后100ms将初始化iScroll，这应该是调用iScroll的安全方式。

2.3.将滚动条加载到框中。

通常，弹出框是通过在display:none和display:block之间切换来实现的。

display:none的元素浏览器未呈现，因此无法计算滚动内容的高度。

因此，在弹出调用show()显示后，滚动条区域被实例化。如下所示：

$('#mobile_show_duobao_all_num ')。show()；Iscroll ('TC-wrapper2 '，{ scroll bar class : ' my scroll bar '，hscrollbar: false，vscroll3360 true，hidescrolbar : false//是否隐藏滚动条})；提示：当出现滑动屏幕时，滑动整个页面的兼容性问题解决如下：

document . addeventlistener(' touch move '，函数(e){ e . preventdefault()；}，false)；2.4、iScroll通过参考。

iScroll中的第二个参数允许您定制一些东西，比如是否隐藏滚动条。常见参数如下：

HScroll false禁止水平滚动真水平滚动默认为truevScroll false精美垂直滚动真垂直滚动默认为truehScrollbar false隐藏水平滚动条vScrollbar false隐藏垂直滚动条fixedScrollbar在iOS系统上。当元素被拖动到滚动条的边界之外时，滚动条将会收缩。如果设置为true，可以防止滚动条超出滚动条的可见区域。Android上默认为True。