iScroll是一种高性能、体积小、无依赖性、多平台的JavaScript滚动插件效果如下：




下载地址：https://github.com/cubiq/iscroll/archive/master.zip

其中包含几个版本的 js：
iscroll.js                   它是通用脚本。
iscroll-lite.js            它是主脚本的精简版本。（使用移动设备。优点：体积小，速度快）
iscroll-probe.js       侦测当前的滚动位置。
iscroll-zoom.js        将缩放添加到标准滚动。
iscroll-infinite.js      可以做无限的和缓存的滚动。
一般使用 iscroll.js 即可
移动端无需兼容PC端可以使用 iscroll-lite.js

使用方法：下面以GIF动图demo为例：
纵向滑动：
1、 基本结构：
HTML结构：

[HTML] 纯文本查看 复制代码

 
<div id="wrapper">
        <ul>
            <li>新闻</li>
            <li>图片</li>
            <li>财经</li>
            <li>视频</li>
            <li>体育</li>
            <li>健康</li>
            <li>娱乐</li>
            <li>时尚</li>
        </ul>
  </div>

CSS样式：

[CSS] 纯文本查看 复制代码

#wrapper {
            margin: 100px auto;
            width: 80px;
            height: 144px;
            overflow: hidden;
            background-color: #888;
            outline: 5px solid #888;
        }

        ul {
            width: 640px;
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            outline: 1px solid #888;
            text-align: center;
            width: 80px;
            line-height: 36px;
            background-color: #f0f0f0;
        }

2、 引入JS文件：

[JavaScript] 纯文本查看 复制代码

<script src='./iscroll.js'></script>

3、 初始化：

[JavaScript] 纯文本查看 复制代码

window.onload = function () {
            var myScroll = new IScroll('#wrapper');
        }

横向滑动：
1、 基本结构：
HTML结构：

[HTML] 纯文本查看 复制代码

 
<div id="wrapper">
        <ul>
            <li>新闻</li>
            <li>图片</li>
            <li>财经</li>
            <li>视频</li>
            <li>体育</li>
            <li>健康</li>
            <li>娱乐</li>
            <li>时尚</li>
        </ul>
  </div>

CSS样式：

[CSS] 纯文本查看 复制代码

#wrapper {
            margin: 100px auto;
            width: 400px;
            height: 36px;
            overflow: hidden;
            background-color: #888;
            outline: 5px solid #888;
        }

        ul {
            width: 640px;
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            outline: 1px solid #888;
            text-align: center;
            width: 80px;
            line-height: 36px;
            background-color: #f0f0f0;
            float: left;
        }

2、 引入JS文件：

[JavaScript] 纯文本查看 复制代码

<script src='./iscroll.js'></script>

3、 初始化：横向滑动需要再初始化的时候添加参数 ‘scrollX: true’

[JavaScript] 纯文本查看 复制代码

window.onload = function () {
            var myScroll = new IScroll('#wrapper', {
                scrollX: true
            });
        }

更多API参数设置，需要参考插件官网
插件官网地址：http://iscrolljs.com/
附件是GIF图demo案例下载

点击查看更多精彩前端资源

6666666666666

天王盖地虎！

66666666666666,抱走

宝塔镇河妖

床前明月光~