学习滚动插件iScroll的简单使用

iScroll介绍

iScroll是一个高性能，资源占用少，无依赖，跨平台的javascript上拉加载，下拉刷新的滚动插件，目前版本v5.2.0。

GitHub下载地址：https://github.com/cubiq/iscroll

iScroll版本

iScroll进行了不同的优化，为了达到更高的性能，iScroll分为了多个版本，你可以根据项目选择最适合的版本。

目前有以下版本：

• iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
• iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案（这个能应付大多数场景）。
• iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。
• iscroll-zoom.js，在标准滚动功能上增加缩放功能。
• iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。

iScroll使用

页面引用

<script type="text/javascript" src="iscroll.js"></script>

HTML结构

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

初始化脚本

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

配置参数说明

var myScroll = new IScroll('#wrapper', {
    mouseWheel: true, //是否监听鼠标滚轮事件
    scrollbars: true,      //是否显示默认滚动条
    preventDefault: true,//是否屏蔽默认事件
    preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }, //列出哪些元素不屏蔽默认事件
    probeType: 3,//需要使用 iscroll-probe.js 才能生效 probeType ： 1   滚动不繁忙的时候触发;probeType ： 2   滚动时每隔一定时间触;probeType ： 3   每滚动一像素触发一次

});

iScroll属性方法

iScroll事件

iScroll 可以处理用户进行移动交互的元素：滚动，缩放，平移，无限滚动，视差滚动，旋转等功能。

文章内容如果写的存在问题欢迎留言指出，让我们共同交流，共同探讨，共同进步~~~

文章如果对你有帮助，动动你的小手点个赞，鼓励一下，给我前行的动力。