自定义滚动条（custom scrollbars）
在iScroll 4这个版本中，可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数，如下：
var myscroll=new iScroll("wrapper",{ scrollbarClass: "myScrollbar" });
需要提醒的是，滚动条是由两个元素组合而成的：容器和显示器。容器同wrapper的高度相同，而显示器则代表的是滚动条本身。
滚动条的HTML结构如下：
<div><div></div></div> .myscrollbarV{ position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px; } .myScrollbarV > div { position:absolute; z-index:100; width:100%; /* The following is probably what you want to customize */ 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); }
通用方法：
（1）refresh 在DOM树发生变化时，应该调用此方法
eg: setTimeout(function () { myScroll.refresh(); }, 0);
（2）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功能的时候可以调用这个函数。
（3）detroy() 完全消除myscroll及其占用的内存空间
eg: myscroll.destroy();
myScroll = null;
iScroll的发展方向
表单域的支持
缩放的优化
更好的桌面浏览器的兼容性
onScrol事件的优化
加个哈希值的变化
DOM改变后自动刷新
您可能感兴趣的文章: