基于iScroll 的开发（不断补充）

iScroll是一个JS插件，支持鼠标和触摸的滑动、滚动操作，可用于实现列表（横、纵、矩阵）、图片幻灯式播放等效果。

本文结合实例，解析iScroll的使用方法以及注意事项。

说明：本文使用的版本是iScroll4 http://cubiq.org/iscroll-4  (更新的版本见 https://github.com/cubiq/iscroll)

 

基本概念

使用iscroll一般需要构造如下结构：

<div class="wrapper">
    <div class="scroller">
        <ul>
            <li></li>
              ......
            <li></li>
        </ul>
    </div>
</div>

最外层是wrapper，用于实例化iScroll的div。

wrapper里面是一个scroller，scroller的宽高与wrapper的宽高共同决定着列表有多少行多少列。例如:

.wrapper {
    width:100px;
    height:100px;
}

.scroller {
    width:300px;
    height:200px;
}

则列表会有2行，3列，横向可以滚3屏，纵向可以滚2屏。

 

从上图中可以看出，wrapper之于scroller，就像viewport之于document.

wrapper的宽高好说，你想让它多大就设置多大。

对于scroller，当元素个数不确定的时候，宽高是要计算出来。

 

动态计算scroller宽高

为演示如何动态计算宽高，我写了一个JQueryUI Widget，并且配了一个demo。（代码下载：https://files.cnblogs.com/dc10101/diorama.zip）

这个widget做的事情就是绘制一个横向滑动或纵向滑动的iscroll，插件使用者只需指定wrapper（也就是可见区域）的宽高，scroller的宽高会自动计算出来。

由于iscroll本身是用float:left来排列元素，因此在绘制横向滑动的iscroll时要调换一下各元素的位置，这些算法在插件的代码中都有体现。

以下截图展示了横向纵向两种iscroll的样子，以及向尾部添加元素后的状态。