5.滚动插件iScroll

滚动插件iScroll

1.iScroll概念

1. iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。
2. 能让项目有滚动，缩放，平移，无限滚动，视差滚动，旋转功能。

2.iScroll基本使用

1. 按照iScroll的规定搭建HTML结构
2. 引入iScroll
3. 创建iScroll对象, 告诉它谁需要滚动

3.iScroll的版本

针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。可以选择最适合的版本。

1. iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
2. iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
3. iscroll-zoom.js，在标准滚动功能上增加缩放功能。
4. iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。

4.举例

css部分
// .iScrollVerticalScrollbar适用于纵向滚动条容器
 .iScrollVerticalScrollbar{
            width: 10px;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 999;
            background-color: #9c9c9c;
            border-radius: 50px;
        }
        // .iScrollIndicator真正的滚动条指示器
        .iScrollIndicator{
            width: 100%;
            background-color: #74ACCF;
            border-radius: 20px;
        }
        ------------------------------------------------
js部分
<script>
    let myScroll = new IScroll('.box',{
        mouseWheel: true,
        //custom:可自定义滚动条样式  true：滚动条为默认样式
        scrollbars:'custom'
    });
    myScroll.on("beforeScrollStart", function () {
        console.log("滚动之前");
    });
    myScroll.on("scrollStart",function () {
        console.log("开始滚动");
    });
    myScroll.on("scrollEnd",function () {
        console.log("滚动结束");
    })
</script>