iscroll实现滚动

最新推荐文章于 2025-09-30 06:39:55 发布

原创最新推荐文章于 2025-09-30 06:39:55 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

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

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

iScroll不仅仅是滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。给它一个扫帚它甚至能帮你打扫办公室。

即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更多不可思议的功能。具体来说：

细粒度控制滚动位置，甚至在滚动过程中。你总是可以获取和设置滚动器的x，y坐标。
动画可以使用用户自定义的擦出功能（反弹’bounce’，弹性’elastic’，回退’back’，…）。
你可以很容易的挂靠大量的自定义事件（onBeforeScrollStart, *
开箱即用的多平台支持。从很老的安卓设备到最新的iPhone，从Chrome浏览器到IE浏览器。

iscroll版本

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

目前我们有以下版本：

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

通过引入iscroll包实现页面滚动

1.iScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。

尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。
最佳的HTML结构如下：

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

在这个小例子中，ul标签将会被滚动。iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。

只有wrapper里的第一个子元素才可以滚动，如果你想要更多的元素可以滚动，那么你可以试试下面的这种写法：

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

在这个例子中，scroller这个元素可以滚动，即便它包含两个ul元素
2.实例化iscroll
iScroll必须在调用之前实例化.
使用ONDOMContentLoaded方式实例化，当然也有其他的实例化方法。
适用于滚动内容只包含文字、图片，并且所有的图片都有固定的尺寸
使用方法：（在head标签中添加如下代码）

<script src="iscroll.js"></script>
    <script>
            varmyscroll;
            function loaded(){
                myscroll=new iScroll("wrapper");
            }
            window.addEventListener("DOMContentLoaded",loaded,false);
    </script>

注意：myscroll这个变量是全局的，因此你可以在任何地方调用它的函数。

3.新建一个html文件
源代码如下：

<!doctype html>
<html lang="en">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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">
<script src="iscroll-4.2.5.js"></script><!--引入js包-->
<!--实例化iScroll-->
<script type="text/javascript">
    var myscroll;
    function loaded(){
    myscroll = new iScroll("wrapper");
    }
    window.addEventListener("DOMContentLoaded",loaded,false);
</script>
<!--CSS样式设置-->
  <title>滚动测试</title>
<link rel="stylesheet" type="text/css" href="test1.css" /><!--引入外部样式表-->
 </head>
 <body>
  <div id="wrapper">
    <div id="scroller">
        <ul id="thelist">
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
            <li>Pretty row 6</li>
            <li>Pretty row 7</li>
            <li>Pretty row 8</li>
            <li>Pretty row 9</li>
            <li>Pretty row 10</li>
            <li>Pretty row 11</li>
            <li>Pretty row 12</li>
            <li>Pretty row 13</li>
            <li>Pretty row 14</li>
            <li>Pretty row 15</li>
            <li>Pretty row 16</li>
            <li>Pretty row 17</li>
            <li>Pretty row 18</li>
        </ul>
    </div>
</div>
</body>
 </body>
</html>

4.引入的css外联样式表（单独新建css文件）
源代码如下：

#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    background:#555;
    overflow:auto;/*内容会被修剪，超出设置的宽高后会出现滚动条*/
}

/*隐藏滚动条*/
#scroller {
    position:relative;
/*  -webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);

    float:left;
    width:100%;
    padding:0;
}


#scroller ul {
    position:relative;
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}


#scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
    overflow:hidden;/*超宽部分不被显示*/
}

#scroller li > a {
    display:block;
}