list-iscroll5.2

标签：cto   border   javascrip   过程   https   refresh   name   模糊   自动   

简介

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

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

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

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

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

使用方法

1、HTML

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

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

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

如果你想要更多的元素的LI 可以滚动，那么你可以用下面的这种写法：

<div id="wrapper">
    <div id="srcoller">
        <ul>
            <li>...</li>
            <li>...</li>
            ... //这里是内容，scroller高于一定大于wrapper高度，wrapper为滚动区域scroller为滚动内容。
        </ul>
    </div>
</div>

2、调用

最基本的脚本初始化的方式如下：

<script type="text/javascript" src="iscroll.js"></script> <script type="text/javascript"> var myScroll = new IScroll(‘#wrapper‘,{

mouseWheel: true, //开启鼠标滚轮支持 scrollbars: true //开启滚动条 }); </script>

官网：http://iscrolljs.com/

GitHub：https://github.com/cubiq/iscroll/

更多参数：http://wiki.jikexueyuan.com/project/iscroll-5/ 

                 https://segmentfault.com/a/1190000003113280

list-iscroll5.2

标签：cto   border   javascrip   过程   https   refresh   name   模糊   自动   

原文地址：http://www.cnblogs.com/lxg0/p/6165827.html