Webkit瀏覽器的scrollbar

假設是 Webkit 的瀏覽器(例如: Google Chrome、Apple Safari)，我們可以使用 ::-webkit-scrollbar 這個 pseudo-elements 來做改變

::-webkit-scrollbar {
      width: 50px;
}
::-webkit-scrollbar-track {
      background-color: red;
}
::-webkit-scrollbar-thumb {
      background-color: blue
}
::-webkit-scrollbar-button {
      background-color: yellow
}
::-webkit-scrollbar-corner {
      background-color: black;
}

顯示效果如下

很醜，但為了讓大家知道每個屬性的效果，所以特地用顏色做區別，還把寬度設為50px，但現實的專案中千萬別這樣做，還是要像前面所說的，要符合整體的網站UI設計才行

不過以上的寫法只適用於 Webkit browsers

IE呢？

其實沒查可能還不知道，IE是第一個支援用CSS來改變 scrollbar 樣式的瀏覽器，早在IE5.5就可以實做，不過僅限於顏色的改變

用我們剛剛的範例當例子，我們可以這樣寫

body {
    scrollbar-face-color: #b46868;
}

結果如下

jScrollPane

剛剛只談到 Webkit 的瀏覽器還有IE的寫法，那Firefox怎麼辦呢？有沒有比較方便的方法可以適用於大多數的瀏覽器，其實是有的，可以嘗試 jScrollPane 這個jQuery plugin

基本的使用方式如下，在網頁裡面載入jQuery和jquery.jscrollpane.min.js還有jquery.jscrollpane.css

接著是js部份

$('.container').jScrollPane();

效果如下

如果要修改樣式的話，可以直接修改jquery.jscrollpane.css這支檔案裡面的幾個類別屬性

.jspTrack
{
    background: #dde; //可以更改顏色
    position: relative;
}

.jspDrag
{
    background: #bbd; //可以更改顏色
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
}

或許會有疑問，為什麼用 jScrollPane 可以支援不同的瀏覽器？其實只要打開 firebug 看看HTML的部份就可以知道

原來 jScrollPane 是用