iScroll——javascript滚动插件

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。

它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

iScroll不仅仅是滚动。它可以处理任何需要与用户进行移动交互的元素。iScroll分为了多个版本。

目前有以下版本：

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

在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。

在使用这个插件时首先要引入iScoll这个js文件。IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。

<script type="text/javascript" src="js/iscroll.js" ></script>
<script type="text/javascript">
　　var myScroll;

　　 function loaded() {
　　　　　　myScroll = new iScroll('wrapper');
　　　}

</script>

尽可能保持DOM结构的简洁。最佳的HTML结构如下：

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

iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。

这里演示一个其中的水平滚动效果：

代码如下：

<!DOCTYPE html>

<html>

    <head>
        <title>test</title>
        <!--<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/datepicker.css">-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style type="text/css">
            body,ul,li {
                padding:0;
                margin:0;
            }
            
            body {
                font-size:12px;
                -webkit-user-select:none;
                -webkit-text-size-adjust:none;
            /*    -webkit-box-sizing:border-box;*/
                font-family:helvetica;
            /*    padding-bottom:45px;    /*    This prevents the scroller to lock if the user swipes down outside of the screen.
                                             NOT needed if in home screen mode. */
            }
            
            #header {
                position:absolute; z-index:2;
                top:0; left:0;
                width:100%;
                height:45px;
                line-height:45px;
                background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
                background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
                background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
                padding:0;
                color:#eee;
                font-size:20px;
                text-align:center;
            }
            
            #header a {
                color:#f3f3f3;
                text-decoration:none;
                font-weight:bold;
                text-shadow:0 -1px 0 rgba(0,0,0,0.5);
            }
            
            #wrapper {
                position:absolute; z-index:1;
                top:45px; bottom:0; left:0;
                width:100%;
                background:#aaa;
                overflow:auto;
            }
            
            #scroller {
                width:2040px;
                height:100%;
                float:left;
                padding:0;
            }
            
            #scroller ul {
                list-style:none;
                display:block;
                float:left;
                width:100%;
                height:100%;
                padding:0;
                margin:0;
                text-align:left;
            }
            
            #scroller li {
                display:block;
                vertical-align:middle;
                float:left;
                padding:0 10px;
                width:80px;
                height:100%;
                border-left:1px solid #ccc;
                border-right:1px solid #fff;
                background-color:#fafafa;
                font-size:14px;
            }
        </style>
            
    </head>      
     
    <body>
        <div id="wrapper">
            <div id="scroller">
                <ul id="thelist">
                    <li>Pretty col 1</li>
                    <li>Pretty col 2</li>
                    <li>Pretty col 3</li>
                    <li>Pretty col 4</li>
                    <li>Pretty col 5</li>
                    <li>Pretty col 6</li>
                    <li>Pretty col 7</li>
                    <li>Pretty col 8</li>
                    <li>Pretty col 9</li>
                    <li>Pretty col 10</li>
                    <li>Pretty col 11</li>
                    <li>Pretty col 12</li>
                    <li>Pretty col 13</li>
                    <li>Pretty col 14</li>
                    <li>Pretty col 15</li>
                    <li>Pretty col 16</li>
                    <li>Pretty col 17</li>
                    <li>Pretty col 18</li>
                    <li>Pretty col 19</li>
                    <li>Pretty col 20</li>
                </ul>
            </div>
        </div>

    </body>
      <script type="text/javascript" src="js/iscroll.js" ></script>
      <script type="text/javascript">
          
          var myScroll;
        function loaded() {
            myScroll = new iScroll('wrapper',{
                
            });
        }
        
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        
        document.addEventListener('DOMContentLoaded', loaded, false);
                  
      </script>

</html>

效果如下：