## 滾動條 滾動條不只是像名字所表達的意義一樣，在內部它們是作為*indicators*的引用。 一個指示器偵聽滾動條的位置并且現實它在全局中的位置，但是它可以做更多的事情。 先從最基本的開始。 ### options.scrollbars 正如我們在[基本功能介紹](https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/scrollers.html#basic-features)中提到的，激活滾動條只需要做一件事情，這件事情就是： ~~~ var myScroll = new IScroll('#wrapper', { scrollbars: true }); ~~~ 當然這個默認的行為是可以定制的。 ### options.fadeScrollbars 不想使用滾動條淡入淡出方式時，需要設置此屬性為`false`以便節省資源。 默認值：`false` ### options.interactiveScrollbars 此屬性可以讓滾動條能拖動，用戶可以與之交互。 默認值：`false` ### options.resizeScrollbars 滾動條尺寸改變基于容器和滾動區域的寬/高之間的比例。此屬性設置為`false`讓滾動條固定大小。這可能有助于自定義滾動條樣式（[參考下面](https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/scrollers.html#styling-the-scrollbar)）。 默認值：`true` ### options.shrinkScrollbars 當在滾動區域外面滾動時滾動條是否可以收縮到較小的尺寸。 有效的值為：`'clip'`?和?`'scale'`。 `'clip'`是移動指示器到它容器的外面，效果就是滾動條收縮起來，簡單的移動到屏幕以外的區域。屬性設置為此值后將大大的提升整個iScroll的性能。 值`'scale'`關閉屬性`useTransition`，之后所有的動畫效果將使用`requestAnimationFrame`實現。指示器實際上有各種尺寸，并且最終的效果最好。 默認值：`false` 注意改變大小不是在GPU上執行的，所以'scale' 是在CPU上執行。 如果你的應用程序將在多種設備上運行，我建議你使用選項`'scale'`，或者設置`'clip'`?為?`false`?(例如：在較老的設備上應該設置為`'clip'`?，而在桌面瀏覽器上應設置為`'scale'`)。 請參考?[滾動條示例](http://lab.cubiq.org/iscroll5/demos/scrollbars/)。 ### 滾動條樣式 如果你不喜歡默認的滾動條樣式，而且你認為你可以做的更好，你可以自定義滾動條樣式。第一步就是設置選項`scrollbars`的值為`'custom'`： ~~~ var myScroll = new IScroll('#wrapper', { scrollbars: 'custom' }); ~~~ 使用下面的CSS類可以簡單的改變滾動條樣式。 * **.iScrollHorizontalScrollbar**，這個樣式應用到橫向滾動條的容器。這個元素實際上承載了滾動條指示器。 * **.iScrollVerticalScrollbar**，和上面的樣式類似，只不過適用于縱向滾動條容器。 * **.iScrollIndicator**，真正的滾動條指示器。 * **.iScrollBothScrollbars**，這個樣式將在雙向滾動條顯示的情況下被加載到容器元素上。通常情況下其中一個（橫向或者縱向）是可見的 [自定義滾動條樣式示例](http://lab.cubiq.org/iscroll5/demos/styled-scrollbars/)。 如果你設置`resizeScrollbars: false`，滾動條將是固定大小，否則它將基于滾動區域的尺寸變化。 請接著閱讀接下來的內容。