前端插件iscroll.js的使用

参考：https://www.cnblogs.com/starof/p/5215845.html

前端插件iscroll.js的使用

GitHub下载地址

https://github.com/cubiq/iscroll

开始
基本结构：

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

iScroll一定要与滚动内容外的wrapper配合才能生效
因为只有wrapper里的第一个子元素才可以滚动，所以要让多个元素滚动，写法如下：

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

需要注意的是： 滚动区域的大小要大于父容器的大小，这样才能实现滚动效果
JS初始化

<script src="iscroll.js"></script>            //引入相关js文件
<script>
        window.onload = function () {         //页面加载完成实现滚动
            new IScroll('#wrapper',{
                scrollX: true,                //横向滚动开启
                scrollY: false                //禁止垂直方向的滚动
            });
        };
</script>

常用功能：

• scrollX，水平滚动，默认false
• scrollY，垂直滚动，默认true
• click，是否允许点击，默认false

基本功能

• options.bounce
  当滚动器到达容器边界时他将执行一个小反弹效果。默认值：true
• options.click
  为了重写原生滚动条，iScroll禁止了一些默认的浏览器行为，比如鼠标的点击。如果你想你的应用程序响应click事件，那么该设置次属性为true。默认值：false
• options.scrollX
  options.scrollY
  默认情况下只有纵向滚动条可以使用。如果你需要横向滚动条，需要将scrollX属性值设置为true。默认值：scrollX：true，scrollY：false
• options.startX
  options.startY
  默认情况下iScroll从0，0（top left）位置开始，通过此属性可以让滚动条从不同位置开始滚动。默认值：0

滚动条

• options.scrollbars
  激活滚动条只需要做一件事情：

var myScroll = new IScroll('#wrapper', {
    scrollbars: true
});

• options.fadeScrollbars
  不想使用滚动条淡入淡出方式时，需要设置此属性为false。默认值：false
• options.interactiveScrollbars
  此属性可以让滚动条能拖动，用户可以与之交互。默认值：true
• options.resizeScrollbars
  滚动条尺寸改变基于容器和滚动区域的宽/高之间的比例。此属性设置为false让滚动条固定大小。默认值：true