iscroll4 精讲

在此文档中你会发现很多例子来教会你如何快速上手iScroll脚本库。参看文中的demo小例子并仔细阅读此文档，可能有点小无聊，但是这篇文章中却是iScroll这个脚本库的精髓之所在哦。   iScroll需要对所要进行滚动的元素进行初始化，并且不限定一个页面中使用iScroll的元素的个数（这里不考虑您的硬件配置）。滚动元素中内容的类型和长度在一定程度上将会影响iScroll脚本库里可以同时使用的元素的个数。   使用iScroll这个脚本库时，DOM树的结构要足够简单，移除不必要的标签，尽量避免过多的标签嵌套使用。   最优的使用iScroll的结构如下所示：  //isScroll JS var myScroll; function loaded() {     myScroll = new iScroll('wrapper', { checkDOMChanges: true });     /*      setInterval(function () {          if (myScroll.isReady())              document.getElementById('thelist').innerHTML += '<UL><LI>new row</LI></UL>';      }, 2000);      */ }    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  document.addEventListener('DOMContentLoaded', loaded, false);     <div id="wrapper">          <div id="scroller">                 <ul>                      <li></li>                       ...                  </ul>         </div>  </div> iScroll里传递的参数 iScroll里的第二个参数允许你自定义一些内容，比如下面的这段代码： var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false}); 第二个参数通常都是一个对象，像上面的这个例子里就设定了不显示滚动条。常用的参数如下： 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） 为了保持资源的完整性，建议去除滚动条   iScroll拉动刷新（pull to refresh） 自从Twitter和一些Apple的本地化应用出现了这个效果之后，这个效果就变得非常流行。你可以看看这儿先一睹为快。 我最近把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作 滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容，不过一旦DOM树发生 了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然，如果 你不想使用这个延迟，那就把setTimeout方法去掉就行了。 iScroll拉动刷新（pull to refresh） 自从Twitter和一些Apple的本地化应用出现了这个效果之后，这个效果就变得非常流行。你可以看看这儿先一睹为快。 我最近把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作 滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容，不过一旦DOM树发生 了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然，如果 你不想使用这个延迟，那就把setTimeout方法去掉就行了。 iScroll缩放(pinch / zoom) 我们不得不面对一个事实，那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放 大和缩小。想要这个功能，只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。 双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能，你至少需要如下配置： var myScroll =new iScroll("wrapper",{zoom:true}); 如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项： zoomMax 指定允许放大的最大倍数，默认为4 【注意事项】：如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在所有需要缩放的 img元素上使用-webkit-transform:translate3d(0,0,0)来实现，而且尤为重要的是，硬件的加速会占用大量 资源，要谨慎使用，否则你的应用可能就此崩溃。 iScroll捕捉元素（snap and snap to element） 捕捉的功能会促使scroller去重新定义位置，这样可以制作更加花哨的传送带效果。点击这里有个小例子。 默认情况下，iScroll将scroller分成四分体，或者是相同大小的wrapper。iScroll 4加入了这个属性允许捕捉scroller里的 任何元素，不考虑外部wrapper的大小。如果你想要实现这样的传送带效果，我建议你使用“quadrant”分割。最佳的设 置如下：  var myscroll=new iScroll("wrapper",{        snap:true,        momentum:false,        hScrollbar:false,        vScrollbar: false    }); iScroll捕获元素，可以通过传递一个字符串来作为查询条件，如下：  var myscroll=new iScroll("wrapper",{           snap:"li",           momentum:false,           hScrollbar:false,           vScrollbar:false    }); 在这个例子中scroller可以捕捉到滚动区域中最左上角的li元素 iScroll自定义滚动条（custom scrollbars） 在iScroll 4这个版本中，可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数，如下：  var myscroll=new iScroll("wrapper",{          scrollbarClass: "myScrollbar"    }); 你可以点击这里看一个小例子，在这个小例子里，myScrollbarH这个类被添加到了水平滚动条上，myScrollbarV这个 类则被添加给了垂直方向上的滚动条上了。需要提醒的是，滚动条是由两个元素组合而成的：容器和显示器。容器同 wrapper的高度相同，而显示器则代表的是滚动条本身。 滚动条的HTML结构如下：  <div class="myScrollbarV">               <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);   } iScroll通用方法： （1）refresh  在DOM树发生变化时，应该调用此方法 （2）scrollTo()  滚动到某个位置 eg: myscroll.scrollTo(0,10,200,true); （3）scrollToElement()  滚动到某个元素 eg: myscroll.scrolToElement("li:nth-child(10)",100); （4）detroy() 完全消除myscroll及其占用的内存空间 eg: myscroll.destroy()