iScroll使用方法

最基本的iScroll使用结构

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

iScroll滚动的内容是wrapper内的内容(不包含wrapper，滚动的是ul)

只有wrapper里的第一个子元素才可以滚动，如果你想要更多的元素可以滚动，那么你可以试试下面的这种写法：

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

在这个例子中，scroller这个元素可以滚动，即便它包含两个ul元素

实例化iScroll

iScroll必须在调用之前实例化，实例化的方法有以下几种

onDOMContentLoaded方式

适用于滚动内容只包含文字、图片，并且所有的图片都有固定的尺寸

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

因为DOMContentLoaded事件是载入DOM结构后就会被调用，所以在图片等元素未载入前可能无法确定滚动区域的长宽。

onLoad方式

<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方式

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

这种情况会在页面加载到js的时候就进行调用，此方法不推荐使用，但是很多javascript的大牛都在用这种方式，我又有什么理由不赞成呢？

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

iScroll的参数

iScroll里的第二个参数允许你自定义一些内容，比如下面的这段代码：

<script>
　　var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
</script>

解释

//false禁止横向滚动 true横向滚动 默认为true
hScroll
//false禁止垂直滚动 true垂直滚动 默认为true
vScroll
//false隐藏水平方向上的滚动条
hScrollbar
//false隐藏垂直方向上的滚动条
vScrollbar
//在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出scroller的可见区域。默认在Android上为true，iOS上为false
fixedScrollbar
//false指定在无渐隐效果时隐藏滚动条
fadeScrollbar
//在没有用户交互时隐藏滚动条 默认为true
hideScrollbar
//启用或禁用边界的反弹，默认为true　
bounce
//启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
momentum
//false取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right）
lockDirection    

Effective

滚动刷新(Pull to refresh)

实例地址:请狠狠地摸我

代码有点长，看看结构就好

var myScroll,
    pullDownEl, pullDownOffset,
    pullUpEl, pullUpOffset,
    generatedCount = 0;

function pullDownAction () {
    setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
        var el, li, i;
        el = document.getElementById('thelist');

        for (i=0; i<3; i++) {
            li = document.createElement('li');
            li.innerText = 'Generated row ' + (++generatedCount);
            el.insertBefore(li, el.childNodes[0]);
        }

        myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
    }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
    setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
        var el, li, i;
        el = document.getElementById('thelist');

        for (i=0; i<3; i++) {
            li = document.createElement('li');
            li.innerText = 'Generated row ' + (++generatedCount);
            el.appendChild(li, el.childNodes[0]);
        }

        myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
    }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight;
    pullUpEl = document.getElementById('pullUp');
    pullUpOffset = pullUpEl.offsetHeight;

    myScroll = new iScroll('wrapper', {
        useTransition: true,
        topOffset: pullDownOffset,
        onRefresh: function () {
            if (pullDownEl.className.match('loading')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
            } else if (pullUpEl.className.match('loading')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
            }
        },
        onScrollMove: function () {
            if (this.y > 5 && !pullDownEl.className.match('flip')) {
                pullDownEl.className = 'flip';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                this.minScrollY = 0;
            } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                this.minScrollY = -pullDownOffset;
            } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                pullUpEl.className = 'flip';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                this.maxScrollY = this.maxScrollY;
            } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                this.maxScrollY = pullUpOffset;
            }
        },
        onScrollEnd: function () {
            if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
                pullDownAction();    // Execute custom function (ajax call?)
            } else if (pullUpEl.className.match('flip')) {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
                pullUpAction();    // Execute custom function (ajax call?)
            }
        }
    });

    setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

自从Twitter和一些Apple的本地化应用出现了这个效果之后，这个效果就变得非常流行。

我们只需要做的就是自定义pullDownAction()这个方法。

可能需要一个ajax来加载新的内容，不过一旦DOM树发生了变化要记得调用refresh这个方法来。

需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。

当然，如果你不想使用这个延迟，那就把setTimeout方法去掉就行了。

缩放(Pinch/Zoom)

把Zoom设置为true就可以用手势来进行放大和缩小

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

如果你想对缩放功能进行深度的自定义的话可以使用zoomMax，它指定允许放大的最大倍数，默认为4。

捕捉元素(snap and snap to element)

实例地址：请狠狠地摸我

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

HTML

<body>
    <div id="wrapper" style="overflow: hidden;">
        <div id="scroller" style="transform-origin: 0px 0px 0px; position: absolute; top: 0px; left: 0px;">
            <ul id="thelist">
                <li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>
                <li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li>
                <li><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li>
                <li><strong>Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>
                <li><strong>Lyuben Dilov's Forth law:</strong> <em>A robot must establish its identity as a robot in all cases.</em></li>
                <li><strong>Harry Harrison's Forth law:</strong> <em>A robot must reproduce. As long as such reproduction does not interfere with the First or Second or Third Law.</em></li>
                <li><strong>Nikola Kesarovski's Fifth law:</strong> <em>A robot must know it is a robot.</em></li>
            </ul>
        </div>
    </div>
    <div id="nav">
        <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">← prev</div>
        <ul id="indicator">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
        <div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next →</div>
    </div>
</body>

JS

var myScroll;

function loaded() {
    myScroll = new iScroll('wrapper', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        onScrollEnd: function () {
            document.querySelector('#indicator > li.active').className = '';
            document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
        }
     });
}

document.addEventListener('DOMContentLoaded', loaded, false);

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

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

自定义滚动条(custom scrollbars)

可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数，如下：

var myscroll=new iScroll("wrapper",{
　　scrollbarClass: "myScrollbar"
});

需要提醒的是，滚动条是由两个元素组合而成的：容器和显示器。容器同wrapper的高度相同，而显示器则代表的是滚动条本身。

HTML

<div class="myScrollbarV">
    <div></div>
</div>

CSS

.myscrollbarV{
    position:absolute;z-index:;width:8px;bottom:7px;top:2px;right:1px;
}
.myScrollbarV > div {
    position:absolute;
    z-index:;
    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);
}

通用方法

refresh()

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

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

scrollTo(x, y, time, relative)

在指定的time时间内让内容滚动条x/y的位置

在200毫秒内Y轴向下滚动100像素

myScroll.scrollTo(0, -100, 200);

相对当前位置在200毫秒内Y轴向上滚动10像素

myScroll.scrollTo(0, 10, 200, true);

scrollToElement(element, time)

在指定的时间内滚动到指定的元素

在100毫秒内滚动到第10个li元素的位置

myScroll.scrollToElement('li:nth-child(10)', 100);

第1个参数可以用CSS3中的选择器来筛选元素

snapToPage(pageX, pageY, time)

在指定的时间内从页面X滚动到页面Y

比如在200毫秒内从第1页滚动到第2页(0代表第1页，1代表第2页)

使用SNAP功能的时候可以调用这个函数。