iScroll相关

iScroll是一款用于移动设备web开发的一款插件。像缩放、下拉刷新、滑动切换等移动应用上常见的一些效果均可以轻松实现。

iScroll的最新版本是2011.07.03发布的4.1.7版。最新版比以往更顺畅，添加了更多的自定义事件，提供了更高级的可编程性。

使用方法：

DOM结构应尽可能保持简洁，避免过多的嵌套。滚动区域为第一个子元素。html代码：

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

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

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);

var myScroll = new IScroll('.wrapper');*/
</script>

上面的DOM结构中，ul将是滚动的区域。若是想同时滚动多个区域就要用一个容器把须要滚动的区域包起来。

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

 

上面的DOM结构中，两个UL会同时滚动。

插件的调用须要在页面彻底加载以后。你能够经过如下3种方法来实现。

• 设置onDOMContentLoaded事件
• 设置onLoad事件
• 把调用代码放到页面的最后。

使用onDOMContentLoaded事件实现滚动

若是滚动区域的长宽是固定的，就能够经过onDOMContentLoaded事件来实现滚动。

<script>
var myscroll;
function loaded() {
    myscroll = new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded", loaded, false);
</script>

注意：myscroll这个变量是全局的，所以你能够在任何地方调用它.

使用onLoad事件实现滚动

由于DOMContentLoaded事件是载入DOM结构后就会被调用，因此在图片等元素未载入前可能没法肯定滚动区域的长宽，此时可使用onLoad事件来实现。

<script src="iscroll.js">
var myscroll;
function loaded() {
    setTimeout(function() {
            myscroll = new iScroll("wrapper");
        },100);
}
window.addEventListener("load", loaded, false);
</script>

 这种状况下iScroll会在页面资源（包括图片）加载完毕100ms以后获得初始化，这应该是一种比较安全的调用iScroll的方式。若是这个时间后还有元素未彻底载入致使没法计算滚动区域长宽，可能会致使错误。但这是目前最好的方法了。

把调用的代码放到最后(inline初始化)

不少javascript大师推荐用这种方法来实现一些须要先加载DOM的特效。所以，在此也可使用这个方法。但插件开发者彷佛并不推荐。由于有可能会出现执行javascript以前没有彻底载入页面元素，好比图片。

<div id="wrapper">
    <ul>
        <li></li>
        ...
    </ul>
</div>
<script>
var myscroll = new iScroll("wrapper");
</script>

 不过建议你使用一些框架的ready方法来安全调用iScroll（好比jquery里的ready()）。

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）

各类效果的实现

滚动刷新http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

 自从Twitter和一些Apple的本地化应用出现了这个效果以后，这个效果就变得很是流行。你能够看看这儿先一睹为快。
       最新版中，做者把把"pull to refresh"这个部分单分出来做为iScroll的一个额外插件。你能够点击这儿看看pull to refresh是如何工做滴。你只须要作的就是自定义pullDownAction()这个方法。你可能须要一个ajax来加载新的内容，不过一旦DOM树发生了变化要记得调用refresh这个方法来。须要记住的是在例子中咱们加了1秒的延迟来模拟网络的延迟效果。固然，若是你不想使用这个延迟，那就把setTimeout方法去掉就好了。

缩放(pinch / zoom)http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

咱们不得不面对一个事实，那就是光有滚动其实没什么新意的。这就是为何在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）　http://cubiq.org/dropbox/iscroll4/examples/carousel/ 

SNAP功能是判断元素是否滑动到指定位置。经过这个效果能够制做花哨的跑马灯效果。

　　插件会自动分析滚动区域内相同标签或相同大小的元素作为捕捉对象，也能够经过参数指定捕捉的对象    

var myscroll = new iScroll("wrapper", {
    snap: true,
    momentum: false,
    hScrollbar: false,
    vScrollbar: false
});

能够经过设置snap参数为指定标签来设定捕捉对象。好比捕捉li标签。   

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"
});

  须要提醒的是，滚动条是由两个元素组合而成的：容器和显示器。容器同wrapper的高度相同，而显示器则表明的是滚动条自己。
           滚动条的HTML结构以下： 

<div class="myScrollbarV">
    <div></div>
</div>
<style type="text/css">
.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);
}
</style>

通用方法：

     （1）refresh  在DOM树发生变化时，应该调用此方法

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

     （2）iScroll还提供了scrollTo, scrollToElement和scrollToPage三个方法让你可以经过javascript来控制滚动效果。

　　　　scrollTo(x, y, time, relative)：在指定的time时间内让内容滚动条x/y的位置。如myScroll.scrollTo(0, -100, 200) 在200毫秒内Y轴向下滚动100像素。 myScroll.scrollTo(0, 10, 200, true)能够实现相对当前位置在200毫秒内Y轴向上滚动10像素的效果。

　　　　scrollToElement(element, time)：在指定的时间内滚动到指定的元素。如myScroll.scrollToElement('li:nth-child(10)', 100) 在100毫秒内滚动到第10个li元素的位置。第1个参数能够用CSS3中的选择器来筛选元素。

　　　　snapToPage(pageX, pageY, time)：在200毫秒内从第1页滚动到第2页（0表明第1页，1表明第2页）。这个使用SNAP功能的时候能够调用这个函数。

     （3）detroy()                       彻底消除myscroll及其占用的内存空间
                eg: myscroll.destroy();

　　　　　　　　myScroll = null;

iScroll的发展方向

• 表单域的支持
• 缩放的优化
• 更好的桌面浏览器的兼容性
• onScrol事件的优化
• 加个哈希值的变化
• DOM改变后自动刷新

　　iscroll官网：http://iscrolljs.com/