iScroll小计

iScroll版本

• iScoll.js     常规版本。
• iscoll-lite.js     精简版。不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。如果你需要的是滚动（特别是在移动平台）这个个又小又快的解决方案。
• iscroll-zoom.js     在标准滚动功能上增加缩放功能。
• iscroll-infinite.js     可以做无限缓存的滚动。

 

入门

1. 尽可能保持DOM结构的简洁。

最佳HTML结构如下：

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

2. iScroll作用与滚动区域的外层。

 

3. 脚本初始化

 

<script type="text/javascript">
    var myScroll = new IScroll('#wrapper');
</script>

支持css ID和css 名称传递滚动容器元素（本例中的“#wrapper”）。

 

4. 只有容器的第一个子元素才会滚动，其他的忽略。（）

 

初始化

 

初始化时需要注意的几个问题：

 

• DOM准备完成后才能初始化iScroll，保险的方式是在window的onload事件中启动它。
• 初始化之前要给定滚动区域的高度和宽度。（若有图片在滚动区域导致不能立马获取区域的高度和宽度，iScroll的滚动尺寸可能会出错）
• 在滚动容器（wrapper）上增加position:relative或者absolute属性，能解决大部分滚动容器大小计算错误问题。

 

demo barebone中的样式：

2d-scroll中的样式：

 

 

 

配置iScroll

 

在iScroll初始化阶段通过构造函数的第二个参数进行配置

 

var myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: true
});

常用的一些参数：

hscroll: false     禁用水平滚动  （horizontal [ˌhɒrɪˈzɒntl] 水平的）

vScroll: false     禁用垂直滚动     （vertical [ˈvɜ:tɪkl] 垂直的）

hideScrollbar: true     禁用滚动条

 

 

刷新

     iScroll需要知道容器（wrapper）和滚动内容（scroller）的大小。在iScroll初始化的时候进行计算，如果元素大小发生了变化，需要告诉iScroll，DOM发生了变化。这个可以通过调用refresh方法来实现。

 

     每当你触摸DOM的时候，浏览器的渲染器会对页面进行重绘。一旦这个重绘发生，我们就尅安全的读取新的DOM属性了。重绘不是瞬间完成的，所以我们需要在刷新iScroll之前给重绘一点时间。

     例子：

ajax('page.php', onCompletion);

function onCompletion () {
    // Update here your DOM

    setTimeout(function () {
        myScroll.refresh();
    }, 0);
};

     如果你的html结构相当复杂，那么你应该给浏览器更多的执行时间，可以设置100到200毫秒的超时时间。     

 

 

    

 

自定义事件

使用on(type, fn)方法注册事件

myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', doSomething);

可以绑定的事件：

beforeScrollStart,     在用户触摸屏幕但还没有开始滚动时触发

scrollStart,               开始滚动

scroll,                      内容滚动时触发

scrollEnd,                 停止滚动时触发

zoomStart,               开始缩放

zoomEnd                  缩放结束