iscroll5.0的使用

代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/rem.js"></script>
    <script src="js/iscroll.js"></script>
    <script type="text/javascript" src="js/demoUtils.js"></script>
    <script type="text/javascript" src="js/iscroll-zoom.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    html{
        font-size: 100px;
    }
    .header{
        width: 7.5rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        font-size: 0.4rem;
        color: #fff;
        background: #000;
        position: absolute;
        top: 0;
        left: 0;
    }
    #wrapper{
        width: 7.5rem;
        height: 3rem;
        position: absolute;
        overflow: hidden;
        top: 1.1rem;
        left: 0;
    }
    ul{
        width: 7.5rem;
        overflow: hidden;
        position: absolute;
    }
    li{
        width: 7.5rem;
        height: 3rem;
        background: red;
        text-align: center;
        line-height: 3rem;
        color: #fff;
        font-size: 0.8rem;
    }

    .iScrollVerticalScrollbar {
        position: absolute;
        z-index: 9999;
        width: 16px;
        bottom: 2px;
        top: 2px;
        right: 2px;
        overflow: hidden;
    }

    .iScrollVerticalScrollbar.iScrollBothScrollbars {
        bottom: 18px;
    }

    .iScrollVerticalScrollbar .iScrollIndicator {
        width: 100%;
        background: -moz-linear-gradient(top, #cc3f6e 0%, #93004e 100%);
        background: -webkit-linear-gradient(top,  #cc3f6e 0%,#93004e 100%);
        background: -o-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
        background: -ms-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
        background: linear-gradient(to bottom,  #cc3f6e 0%,#93004e 100%);
    }


</style>
<body>
    <header class="header">ISCROLL</header>
    <div id="wrapper">
        <ul>
            <li id="tap">1</li>
            <li style="background: blue">2</li>
            <li style="background: pink">3</li>
            <li style="background: gray">4</li>
        </ul>
    </div>
    <div style="position: absolute;bottom: 1rem;left: 1rem;">
        <button class="btn1">滚动到固定位置</button>
        <button class="btn2">上一页</button>
        <button class="btn3">下一页</button>
        <button class="btn4">缩放</button>
    </div>
    
</body>
</html>
<script type="text/javascript">
    window.onload = function(){
        var myScroll = new IScroll('#wrapper',{
            mouseWheel:true,//鼠标滚动
            scrollbars:'custom',//滚动条
            interactiveScrollbars:true,//滚动条能拖动
            bounce:true,//禁止反弹
            scrollX: false,//设置x轴滚动
            scrollY: true,//设置y轴滚动
            snap:true,//滚动对齐 ，
            // zoom:true,//缩放
            // wheelAction:'zoom',//滚动的事件为缩放
            bindToWrapper:true,// 触摸滚动
            bounceTime:1200,//反弹的时间
            bounceEasing: 'elastic',//动画的效果
            keyBindings: {
                pageUp: 33,
                pageDown: 34,
                end: 35,
                home: 36,
                left: 37,
                up: 38,
                right: 39,
                down: 40
            }
        });
        // 触摸滚动
        // document.addEventListener('touchmove', function (e) { e.preventDefault(); }, isPassive() ? {
        //  capture: false,
        //  passive: false
        // } : false);

        $('.btn1').click(function(){
            /*x 和 y呈现你想滚动到横向轴或者纵向轴的页面数。如果你需要在单个唯独上使用滚动条，只需要为你不需要的轴向传递0值。
        time属性是动画周期，easing属性是滚动到指定点使用的擦除功能类型。请参考高级功能中的option.bounceEasing。这两个属性都是可选项。*/
            myScroll.goToPage(0, 2, 5000);
        });
        // 上一页
        $('.btn2').click(function(){
            myScroll.prev();
        });
        // 下一页
        $('.btn3').click(function(){
            myScroll.next();
        })
        // 缩放
        $('.btn4').click(function(){
            myScroll.zoom(4, 325, 150,1000);
        })
        // 事件的绑定
        
        myScroll.on('beforeScrollStart',function(){
            console.log("用户触摸屏幕但没有楚大滚动")
        })
        myScroll.on('scrollCancel',function(){
            console.log("滚动初始化完成，但没有执行")
        })
        myScroll.on('scrollStart',function(){
            console.log("开始滚动")
        })
        myScroll.on('scrollStart',function(){
            console.log("滚动中")
        })
        myScroll.on('scrollEnd',function(){
            console.log("停止滚动");
            // 获取当前滚动的位置
            console.log(this.y+"****")
            // 获取当前页
            console.log(this.currentPage);
            // 销毁实例
            // myScroll.destroy();
            // myScroll = null;
        })
        myScroll.on('flick',function(){
            console.log("用户打开左或右")
        })
        myScroll.on('zoomStart',function(){
            console.log("开始缩放")
        })
        myScroll.on('zoomEnd',function(){
            console.log("缩放结束")
        })
    }
    
</script>