iScroll是高性能的、小尺寸的、无依赖关系的、支持多平台的滑动JavaScript库。 当然,不只是scroll,还有滚动、缩放、平移、无限滚动、视差滚动等。
为了达到更好的新能,所以iScroll分为了很多版本,我们可以根据需要来使用,目前主要有下面的一些js库:
- iscroll.js,它是通用脚本。它包括最常用的功能,并在占据很小的内存中提供非常高的性能。我们一般使用的都是这个。
- iscroll-lite.js,它是主要脚本的精简版本。它不支持snap,scrollbars,鼠标滚轮,键绑定。但是如果您需要的只是滚动(尤其是在移动设备上),iScroll lite是最小,最快的解决方案。
- iscroll-probe.js,探测当前的滚动位置是一项艰巨的任务,这就是为什么我决定为此建立专用版本。如果您需要知道任何给定时间的滚动位置,这是iScroll。(我正在做一些更多的测试,这可能会在正常的
iscroll.js
脚本中,所以请留意)。 - iscroll-zoom.js,添加缩放到标准滚动。
- iscroll-infinite.js,可以做无限次和缓存的滚动。处理很长的元素列表对于移动设备来说是不容易的。iScroll无限使用缓存机制,可以滚动潜在的无限数量的元素。
下面的连接是isroll常用的一些效果的demo,通过这些demo我们可以更好地学习与掌握。
https://github.com/cubiq/iscroll/tree/master/demos
下载安装
在github上clone该库,然后进入bulid文件夹中,我们就可以发现这些js文件了,目录结构如下所示:
我们常用的一般是iscroll.js,这个文件不大,只有两千行,50多kb,在实际生产环境中我们使用压缩版本会更小。 也可以根据具体的需要选择使用。
然后引入到项目文件中即可。
第一个例子
iscroll是不限制一个页面中的滚动区域的数量的,但是对于每一个滚动区域,我们需要为它在外层添加一个.wrapper的类名(当然也可以是别的名称),如下所示:
<div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div>
没错,就是这么简单,iscroll提倡简洁的DOM。在这个例子中,ul将会被滚动,且只有容器的第一个孩子节点被滚动,其他的孩子将会被忽略。
提示:
box-shadow
,opacity
,text-shadow
和alpha通道是不利于性能的。滚动可能看起来不错,但是一旦你的DOM变得越来越复杂,性能表现将会变差。
然后就是配置脚本了,最终的最基础的配置如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scroll</title> <script src="./build/iscroll.js"></script> <script> var myScroll; function load() { myScroll = new IScroll('.wrapper'); } </script> </head> <body οnlοad="load()"> <div class="wrapper"> <ul> <li>1</li> <li>1</li> <li>1</li> </ul> </div> </body> </html>
需要在DOM准备就绪时启动iScroll。最安全的打算是在窗口onload
事件上启动它。DOMContentLoaded
或内联初始化也很好,但请记住脚本需要知道滚动区域的高度/宽度。如果您的图像没有明确的宽度/高度声明,iScroll将很可能最终导致错误的滚动尺寸。
另外: 在初始化IScroll实例时,我们这里传入的类似于css选择器,它只会获得第一个元素,因为它调用的api是querySelector而不是querySelectorAll,所以如果页面中有多个滚动区域,需要遍历实现。 且我们还可以传入获得的元素,如new IScroll(document.getElementById("wrapper"));
配置IScroll
我们可以通过传入第二个参数来配置iscroll,如下所示:
myScroll = new IScroll('.wrapper', { mouseWheel: true, scrollbars: false });
即使滑动支持鼠标的滚动和显示scrolllbar。
iScroll使用各种技术根据设备/浏览器功能滚动,通常您不需要配置引擎,iScroll足够聪明,为您挑选最好的。尽管如此,重要的是了解iScroll工作的机制以及如何配置它们。
- useTransform 默认为true, 即使用css的transform属性。
- useTransition 默认为true, 即执行动画。
- HWCompositing 默认为true, 此选项尝试通过附加
translateZ(0)
到转换CSS属性将卷轴放在硬件层上。这大大提高了性能,特别是在移动设备上。
基本功能
- bounce:弹跳 默认为true,即滚轮遇到边界时,会执行一个弹跳动画,如果设置为false,那么表现会更平滑。
- click: 点击 默认为false, iscroll必须阻止某些默认的浏览器行为。如果希望应用程序响应点击事件,则必须设置为true。
- disableMouse 、 disablePointer、 disableTouch: 这些功能默认为false, 如果需要,可以设置为true。
- freeScroll:默认为false。 通常对于2D的滚动,往往是左右滚动时,上下不可滚动;上下滚动时,左右不可滚动,如果设置为true,我们就可以随意滚动。
- momentum: 默认为true, 当用户在屏幕上快速轻弹时,您可以打开/关闭动画动画。关闭这个大大提高了性能
- mouseWheel: 默认为true,监听鼠标滚轮事件。
- preventDefault: 默认为true,阻止默认事件。
- scrollbars: 默认为false。
- scrollX和scrollY: 默认垂直滚动,即前者为false,后者为true。
- startX和startY: 默认滚动的起始位置为00。 也可以自行设置。
- tap: 默认为false。即当用户点击到scrollbars时是否触发事件。
- fadeScrollbars: 默认为false。 当不使用时,滚动条会消失。
- interactiveScrollbars: 默认为false。 用户条变得可拖动,用户可以与之交互。
- resizeScrollbars: 默认为true。 即我们可以自定义scrollbars的大小比例等。
- shrinkScrollbars: 默认为false。 有效值为clip和scale
'。clip'
只需将指示器移动到其容器外部,印象就是滚动条缩小,但它只是简单地移出屏幕。如果您可以通过视觉效果生活,此选项将大大提高整体性能。
对滚动条进行个性化设置: 首先设置scrollbars为custom。 然后就可以使用下面的类来设计了:
- .iScrollHorizontalScrollbar,它应用于水平容器。实际托管滚动条指示器的元素。
- .iScrollVerticalScrollbar,与上述相同,但用于垂直容器。
- .iScrollIndicator,实际的滚动条指示器。
- .iScrollBothScrollbars,当显示两个滚动条时,这将添加到容器元素中。通常只有一个(水平或垂直)是可见的。
更多请参考官方文档。
结束