iScroll 4的使用

概要

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方法去掉就好了。

 

缩放(pinch / zoom)

        咱们不得不面对一个事实，那就是光有滚动其实没什么新意的。这就是为何在iScroll 4这个版本里咱们容许你能够放

        大和缩小。想要这个功能，只须要设置放大的参数zoom 为true便可实现利用手势来放大和缩小。你能够看看这儿。

        双击放大和缩小的功能在iScroll 4里也是获得支持的。要使用缩放功能，你至少须要以下配置：

                var myScroll =new iScroll("wrapper",{zoom:true});

       若是你想对缩放功能进行深度的自定义的话可使用下面的一些选项：

               zoomMax   指定容许放大的最大倍数，默认为4

      【注意事项】：若是想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在全部须要缩放的img元素上使用-webkit-transform:translate3d(0,0,0)来实现，并且尤其重要的是，硬件的加速会占用大量资源，要谨慎使用，不然你的应用可能就此崩溃。

捕捉元素（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

                  });

          捕获元素，能够经过传递一个字符串来做为查询条件，以下：

                var myscroll=new iScroll("wrapper",{

                      snap:"li",

                      momentum:false,

                      hScrollbar:false,

                      vScrollbar:false

                });

 

           在这个例子中scroller能够捕捉到滚动区域中最左上角的li元素

 

自定义滚动条（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);
                 }

通用方法：

     （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()

 

原文：http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html

 

 

如下整理的iScroll参数以及其表明的意思： 

hScroll: true, //是否水平滚动
vScroll: true, //是否垂直滚动
x: 0, //滚动水平初始位置
y: 0, //滚动垂直初始位置
bounce: true, //是否超过实际位置反弹
bounceLock: false, //当内容少于滚动是否能够反弹，这个实际用处不大
momentum: true, //动量效果，拖动惯性
lockDirection: true,
//当水平滚动和垂直滚动同时生效时，当拖动开始是否锁定另外一边的拖动
useTransform: true, //是否使用CSS形变
useTransition: false, //是否使用CSS变换
topOffset: 0, //已经滚动的基准值(通常状况用不到)
checkDOMChanges: false, //是否自动检测内容变化

checkDOMChanges 这个不是十分靠得住，由于他目前是轮询检测offsetWidth、offsetHeight，而后才去调自身的refresh 从新计算滚动区域，可是有时候只检测这个不是很准.. 

// Scrollbar 的相关参数
hScrollbar: true, //是否显示水平滚动条
vScrollbar: true, //同上垂直滚动条
fixedScrollbar: isAndroid, //对andriod的fixed
hideScrollbar: isIDevice,  //是否隐藏滚动条
fadeScrollbar: isIDevice && has3d, //滚动条是否渐隐渐显
scrollbarClass: '', //字定义滚动条的样式名

经过scrollbar这些参数能够配置iscroll的滚动条，经过scrollbarClass能够本身定义一套滚动条的样式。 

// Zoom 放大相关的参数
zoom: false, //默认是否放大
zoomMin: 1, //放大的最小倍数
zoomMax: 4, //最大倍数
doubleTapZoom: 2, //双触放大几倍
wheelAction: 'scroll', //鼠标滚动行为（还能够是zoom）

这个Zoom我以为比较好用，对于一个固定显示图片区域的相似应用，能够很是简单的作到固定滚动，包括两指放大的应用。 
wheelAction 这个参数是给PC的鼠标滚动定义的，能够定义为滚动鼠标滚轮放大。 

// 自定义 Events 的相关参数
onRefresh: null, //refresh 的回调，关于自身什么时候调用refresh 后面会继续谈到
onBeforeScrollStart: function (e) { e.preventDefault(); },
//开始滚动前的时间回调，默认是阻止浏览器默认行为
onScrollStart: null, //开始滚动的回调
onBeforeScrollMove: null, //在内容移动前的回调
onScrollMove: null, //内容移动的回调
onBeforeScrollEnd: null, 在滚动结束前的回调
onScrollEnd: null, //在滚动完成后的回调
onTouchEnd: null, //手离开屏幕后的回调
onDestroy: null, //销毁实例的回调
onZoomStart: null,
onZoom: null,
onZoomEnd: null

经过了解以上参数，你能够很是容易的配置本身的iscroll 应用： 
你能够经过onScrollEnd 事件回调在结束滚动后执行一段你本身的代码 
你也能够简单的新建一个能够经过双触放大的固定滚动区域。 
你也能够什么都不作，只是简单的约定碰到边界是否反弹，等等。 

var myscroll = new iScroll('wrapper', {
     hScroll: false, //是否水平滚动
     vScroll: true, //是否垂直滚动
     y: 10, //滚动垂直初始位置
     bounce : false
});

固然，在使用时，若是对建立的iscroll 实例保存引用会有不少好处： 
你能够在内容改变时，DOM结构发生改变时调用 myscroll.refresh() 来从新计算固定滚动区域的内容高度，从而使得你的iscroll工做正常。 
你也能够在你的应用结束时，用过这个引用调用destroy方法来，销毁这个iscroll 实例 
等等.... 

 

原文出处： http://qbaty.iteye.com/blog/1221061