iScroll框架解析

概要
iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器（诸如iPhone，iPad，Android这些系统上广泛使用）提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是，这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的中间区域。
然而，Android系统最新修订版已经可以支持这种功能了（尽管支持的力度还不是特别好），Apple公司似乎不太情愿将one-finger滑动事件运用到div元素上。
除了以前版本的iScroll的特性以外，iScroll 4还包括如下的特性：
     （1）缩放（Pinch/Zoom）
    （2）拉动刷新（Pull up/down to refresh）
    （3）速度和性能提升
    （4）精确捕捉元素
    （5）自定义滚动条
      友情提示：iScroll 4并不是iScroll 3的简易替代版本，API文档已经不一样了。 同时考虑到此版本正处于测试期，一些API
                          可能会有细微的变化。
使用指南
在此文档中你会发现很多例子来教会你如何快速上手iScroll脚本库。参看文中的demo小例子并仔细阅读此文档，可能有点小无聊，但是这篇文章中却是iScroll这个脚本库的精髓之所在哦。
iScroll需要对所要进行滚动的元素进行初始化，并且不限定一个页面中使用iScroll的元素的个数（这里不考虑您的硬件配置）。滚动元素中内容的类型和长度在一定程度上将会影响iScroll脚本库里可以同时使用的元素的个数。
使用iScroll这个脚本库时，DOM树的结构要足够简单，移除不必要的标签，尽量避免过多的标签嵌套使用。
最优的使用iScroll的结构如下所示：
<div id="wrapper">
        <ul>
               <li></li>
               .....
        </ul>
</div>
在这个小例子中，ul标签将会被滚动。iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
【注意事项】：
只有wrapper里的第一个子元素才可以滚动，如果你想要更多的元素可以滚动，那么你可以试试下面的这种写法：
<div id="wrapper">
        <div id="scroller">
               <ul>
                    <li></li>
                     ...
                </ul>
                <ul>  
                         <li></li>
                          ...
                </ul>
       </div>
</div>
在这个例子中，scroller这个元素可以滚动，即便它包含两个ul元素
iScroll必须在调用之前实例化，你可以在下面几种情况下对iScroll进行实例化：
    （1）onDOMContentLoaded
    （2）onLoad
    （3）以内联inline方式
下面我们逐个来讲讲这三种用法的优缺点
ONDOMContentLoaded
        适用于滚动内容只包含文字、图片，并且所有的图片都有固定的尺寸
        使用方法：（在head标签中添加如下代码）
        <script src="iscroll.js"></script>
        <script>
                 var myscroll;
                function loaded(){
                           myscroll=new iScroll("wrapper");
                 }
               window.addEventListener("DOMContentLoaded",loaded,false);
         </script>
         注意：myscroll这个变量是全局的，因此你可以在任何地方调用它的函数
onLoad
        有些时候在DOMContentLoaded的状态下就初始化iScroll其实是有点草率的，因此此时页面的资源可能还没有全部加载
        完毕。如果你遇到了一些很怪异的行为可以试试下面的写法：
        <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的
         方式。
inline初始化
         这种情况会在页面加载到js的时候就进行调用，此方法不推荐使用，但是很多javascript的大牛都在用这种方式，我又
         有什么理由不赞成呢？
         <script src="iscroll.js"></script>
                    <div id="wrapper">
                            <ul>
                                <li></li>
                                 ...
                          </ul>
                  </div>
        <script>
                   var myscroll=new iScroll("wrapper");
        </script>
        不过建议你使用一些框架的ready方法来安全调用iScroll（比如jquery里的ready()）。
iScroll里传递的参数
        iScroll里的第二个参数允许你自定义一些内容，比如下面的这段代码：
       <script>
                 var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
       </script>
       第二个参数通常都是一个对象，像上面的这个例子里就设定了不显示滚动条。常用的参数如下：
               hScroll               false 禁止横向滚动 true横向滚动 默认为true
               vScroll               false 精致垂直滚动 true垂直滚动 默认为true
               hScrollbar         false隐藏水平方向上的滚动条
               vScrollbar         false 隐藏垂直方向上的滚动条
               fixedScrollbar  在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出
                                        scroller的可见区域。 默认在Android上为true， iOS上为false
               fadeScrollbar  false 指定在无渐隐效果时隐藏滚动条
               hideScrollbar  在没有用户交互时隐藏滚动条 默认为true
               bounce            启用或禁用边界的反弹，默认为true
               momentum     启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
               lockDirection  false取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right）
                为了保持资源的完整性，建议去除滚动条
拉动刷新（pull to refresh）
        自从Twitter和一些Apple的本地化应用出现了这个效果之后，这个效果就变得非常流行。你可以看看 这儿 先一睹为快。
       我最近把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击 这儿 看看pull to refresh是如何工作
       滴。 你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容，不过一旦DOM树发生
        了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然，如果
        你不想使用这个延迟，那就把setTimeout方法去掉就行了。
转自：http://hi.baidu.com/ali_myself/b ... 459046106419.html#0