滾動(dòng)條不只是像名字所表達(dá)的意義一樣，在內(nèi)部它們是作為indicators的引用。

一個(gè)指示器偵聽滾動(dòng)條的位置并且現(xiàn)實(shí)它在全局中的位置，但是它可以做更多的事情。

先從最基本的開始。

options.scrollbars

正如我們?cè)?a href="#basic-features">基本功能介紹中提到的，激活滾動(dòng)條只需要做一件事情，這件事情就是：

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

當(dāng)然這個(gè)默認(rèn)的行為是可以定制的。

options.fadeScrollbars

不想使用滾動(dòng)條淡入淡出方式時(shí)，需要設(shè)置此屬性為false以便節(jié)省資源。

默認(rèn)值：false

options.interactiveScrollbars

此屬性可以讓滾動(dòng)條能拖動(dòng)，用戶可以與之交互。

默認(rèn)值：false

options.resizeScrollbars

滾動(dòng)條尺寸改變基于容器和滾動(dòng)區(qū)域的寬/高之間的比例。此屬性設(shè)置為false讓滾動(dòng)條固定大小。這可能有助于自定義滾動(dòng)條樣式（參考下面）。

默認(rèn)值：true

options.shrinkScrollbars

當(dāng)在滾動(dòng)區(qū)域外面滾動(dòng)時(shí)滾動(dòng)條是否可以收縮到較小的尺寸。

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

'clip'是移動(dòng)指示器到它容器的外面，效果就是滾動(dòng)條收縮起來(lái)，簡(jiǎn)單的移動(dòng)到屏幕以外的區(qū)域。屬性設(shè)置為此值后將大大的提升整個(gè)iScroll的性能。

值'scale'關(guān)閉屬性useTransition，之后所有的動(dòng)畫效果將使用requestAnimationFrame實(shí)現(xiàn)。指示器實(shí)際上有各種尺寸，并且最終的效果最好。

默認(rèn)值：false

注意改變大小不是在GPU上執(zhí)行的，所以'scale' 是在CPU上執(zhí)行。

如果你的應(yīng)用程序?qū)⒃诙喾N設(shè)備上運(yùn)行，我建議你使用選項(xiàng)'scale'，或者設(shè)置'clip' 為 false (例如：在較老的設(shè)備上應(yīng)該設(shè)置為'clip' ，而在桌面瀏覽器上應(yīng)設(shè)置為'scale')。

請(qǐng)參考 滾動(dòng)條示例。

滾動(dòng)條樣式

如果你不喜歡默認(rèn)的滾動(dòng)條樣式，而且你認(rèn)為你可以做的更好，你可以自定義滾動(dòng)條樣式。第一步就是設(shè)置選項(xiàng)scrollbars的值為'custom'：

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

使用下面的CSS類可以簡(jiǎn)單的改變滾動(dòng)條樣式。

• .iScrollHorizontalScrollbar，這個(gè)樣式應(yīng)用到橫向滾動(dòng)條的容器。這個(gè)元素實(shí)際上承載了滾動(dòng)條指示器。
• .iScrollVerticalScrollbar，和上面的樣式類似，只不過(guò)適用于縱向滾動(dòng)條容器。
• .iScrollIndicator，真正的滾動(dòng)條指示器。
• .iScrollBothScrollbars，這個(gè)樣式將在雙向滾動(dòng)條顯示的情況下被加載到容器元素上。通常情況下其中一個(gè)（橫向或者縱向）是可見的

自定義滾動(dòng)條樣式示例。

如果你設(shè)置resizeScrollbars: false，滾動(dòng)條將是固定大小，否則它將基于滾動(dòng)區(qū)域的尺寸變化。

請(qǐng)接著閱讀接下來(lái)的內(nèi)容。