iscroll

    它是什么？

    • 模拟原生滚动小姑

    它能干什么？

    • 表格滚动
    • 下拉刷新
    • 图片左右滑动展示

    针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。
    目前我们有以下版本：

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

    特别熟的时候在考虑使用定制版本

    打开demo/simple

    html

    记住#wrapper，它是核心

    另外就是css，把里面的css都copy到iscroll.css里，在html里引入即可

    js

    3. var myScroll;
    5. function loaded () {
    6.     myScroll = new IScroll('#wrapper', { mouseWheel: true });
    9. document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    11. </script>

    调用方式

    改成zepto的domready里

    1. $(function(){
    3.   loaded () ;
    4. });

    这样就完成了基本操作

    iscroll.js 249行

    iscroll默认屏蔽了部分点击事件

    比如你在#wrapper内部放a标签或button的click事件是绑定补上的。需要配置

    1. myScroll = new IScroll('#wrapper', { 
    2.   click: true

    选项和方法

    • 各种动画，外观，滚动条等
    • 下拉刷新
    • 无限滚动
    • 分页indicator
    • 跳转到某页

    事件回调（用生命周期去理解）

    • beforeScrollStart，在用户触摸屏幕但还没有开始滚动时触发。
    • scrollCancel，滚动初始化完成，但没有执行。
    • scrollStart，开始滚动
    • scroll，内容滚动时触发，只有在scroll-probe.js版本中有效，请参考onScroll event。
    • scrollEnd，停止滚动时触发。
    • flick，用户打开左/右。
    • zoomStart，开始缩放。
    • zoomEnd，缩放结束。

    总结

    • html
    • js