iScroll.js 使用方法参考

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

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

<script src="/UploadFiles/2021-04-02/iscroll.js">

注意：myscroll这个变量是全局的，因此你可以在任何地方调用它
　　（2）使用onLoad事件实现滚动
因为DOMContentLoaded事件是载入DOM结构后就会被调用，所以在图片等元素未载入前可能无法确定滚动区域的长宽，此时可以使用onLoad事件来实现。




<script src="/UploadFiles/2021-04-02/iscroll.js">

这种情况下iScroll会在页面资源（包括图片）加载完毕100ms之后得到初始化，这应该是一种比较安全的调用iScroll的方式。
　　（3）inline初始化
这种情况会在页面加载到js的时候就进行调用，此方法不推荐使用，但是很多javascript的大牛都在用这种方式，我又有什么理由不赞成呢？


<script src="/UploadFiles/2021-04-02/iscroll.js">

不过建议你使用一些框架的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' demo
        自从Twitter和一些Apple的本地化应用出现了这个效果之后，这个效果就变得非常流行。你可以看看这儿先一睹为快。

       最新版中，作者把把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容，不过一旦DOM树发生了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然，如果你不想使用这个延迟，那就把setTimeout方法去掉就行了。
缩放(pinch / zoom)　　'Pull to refresh' demo
        我们不得不面对一个事实，那就是光有滚动其实没什么新意的。这就是为什么在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）　　'Carousel' demo
　　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>
.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树发生变化时，应该调用此方法

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改变后自动刷新

            
            上一篇：Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

            下一篇：BootStrap的JS插件之轮播效果案例详解