滚动条

滚动条不只是像名字所表达的意义一样，在内部它们是作为indicators的引用。

一个指示器侦听滚动条的位置并且现实它在全局中的位置，但是它可以做更多的事情。

先从最基本的开始。

options.scrollbars

正如我们在基本功能介绍中提到的，激活滚动条只需要做一件事情，这件事情就是：

  1. var myScroll = new IScroll('#wrapper', {
  2.     scrollbars: true
  3. });

当然这个默认的行为是可以定制的。

options.fadeScrollbars

不想使用滚动条淡入淡出方式时，需要设置此属性为false以便节省资源。

默认值：false

options.interactiveScrollbars

此属性可以让滚动条能拖动，用户可以与之交互。

默认值：false

options.resizeScrollbars

滚动条尺寸改变基于容器和滚动区域的宽/高之间的比例。此属性设置为false让滚动条固定大小。这可能有助于自定义滚动条样式（参考下面）。

默认值：true

options.shrinkScrollbars

当在滚动区域外面滚动时滚动条是否可以收缩到较小的尺寸。

有效的值为：'clip' 和 'scale'。

'clip'是移动指示器到它容器的外面，效果就是滚动条收缩起来，简单的移动到屏幕以外的区域。属性设置为此值后将大大的提升整个iScroll的性能。

值'scale'关闭属性useTransition，之后所有的动画效果将使用requestAnimationFrame实现。指示器实际上有各种尺寸，并且最终的效果最好。

默认值：false

注意改变大小不是在GPU上执行的，所以’scale’ 是在CPU上执行。

如果你的应用程序将在多种设备上运行，我建议你使用选项'scale'，或者设置'clip' 为 false (例如：在较老的设备上应该设置为'clip' ，而在桌面浏览器上应设置为'scale')。

请参考 滚动条示例。

滚动条样式

如果你不喜欢默认的滚动条样式，而且你认为你可以做的更好，你可以自定义滚动条样式。第一步就是设置选项scrollbars的值为'custom'：

  1. var myScroll = new IScroll('#wrapper', {
  2.     scrollbars: 'custom'
  3. });

使用下面的CSS类可以简单的改变滚动条样式。

  • .iScrollHorizontalScrollbar，这个样式应用到横向滚动条的容器。这个元素实际上承载了滚动条指示器。
  • .iScrollVerticalScrollbar，和上面的样式类似，只不过适用于纵向滚动条容器。
  • .iScrollIndicator，真正的滚动条指示器。
  • .iScrollBothScrollbars，这个样式将在双向滚动条显示的情况下被加载到容器元素上。通常情况下其中一个（横向或者纵向）是可见的

自定义滚动条样式示例。

如果你设置resizeScrollbars: false，滚动条将是固定大小，否则它将基于滚动区域的尺寸变化。

请接着阅读接下来的内容。