## 滾動條
滾動條不只是像名字所表達的意義一樣,在內部它們是作為*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`,滾動條將是固定大小,否則它將基于滾動區域的尺寸變化。
請接著閱讀接下來的內容。