文章目的
有時候我們在製作網頁的時候都會遇到需要自訂義 scrollbar 的時候，筆者最近在這方面遇到一些困難，因此想用此篇文章記錄如何解決這方面問題。
ScrollBar 特性
首先我們要知道的是 ScrollBar 的兼容性問題，基本上我們在 css 中就可以改變我們 ScrollBar 的樣式，但這僅僅只適用於 webkit 的瀏覽器，若要兼容其他瀏覽器，我們就會需要使用到 js 來幫助我們，若僅僅只是想達到 webkit 效果且樣式簡單可以推薦你們看這篇文章–Webkit 自定義Scroll Bar外觀
ScrollBar Thumb 問題
了解了兼容性問題之後，我們再來了解一下 ScrollBar Thumb，ScrollBar Thumb 顧名思義就是滾軸中我們可以拖曳的區塊，它會根據我們滾軸的長短改變 size，好讓我們視覺上看起來都是從頭滾到底而不會中斷。
但這時候問題來了，若我們今天要自訂義 ScrollBar Thumb 呢？我的自訂義圖案就那麼一丁點，可是 ScrollBar Thumb 那麼長我該怎麼讓我的圖案可以像是 ScrollBar Thumb 一樣從頭滾到尾呢？
這就是筆者這次遇到最頭痛的情況，以下我將分享我是如何解決這問題。
Overlay Scrollbars
這是筆者找到的一個自訂義 ScrollBar 的套件，它的特色在於只要利用 jquery 或 js 加入一些特定參數就可以控制我們指定範圍或指定 Class 的 ScrollBar，另外它裡面提供了多種樣式 Demo 供我們參考，其中有一種模板就是利用自訂義 ScrollBar Thumb 來取代預設 ScrollBar Thumb，於是筆者先將套件引入專案中，並將其提供的 Demo 程式碼做修改，主要是修改 css 部分，圖片方面用 background-image 引用，這樣就可以達到我們要的效果囉 !!
另外這個套件也兼顧了各瀏覽器的兼容性問題，本人認為是自訂義 ScrollBar 時不錯的選擇。
相關文件我會放在參考資料。
參考資料
Overlay Scrollbars
Overlay Scrollbars Demo
Overlay Scrollbars：jQuery 自定義捲軸、可單純使用 JS，半透明且可自動隱藏