自定義瀏覽器滾動條的樣式
自定義IE瀏覽器滾動條樣式
追溯瀏覽器對滾動條的自定義，恐怕最早的就是IE瀏覽器了（好像最開始支援的版本是IE5.5）。下面列出了多個版本的支援性況：
滾動條樣式 支援情況 支援瀏覽器版本 可否繼承 描述
scrollbar-3dlight-color IE特有屬性 IE5.5+ y 設定滾動框的和滾動條箭頭左上邊緣的顏色
scrollbar-highlight-color IE特有屬性 IE5.5+ y 設定滾動框的和滾動條箭頭左上邊緣的顏色
scrollbar-face-color IE特有屬性 IE5.5+ y 設定滾動框和滾動條箭頭的顏色
scrollbar-arrow-color IE特有屬性 IE5.5+ y 設定滾動條箭頭的顏色
scrollbar-shadow-color IE特有屬性 IE5.5+ y 設定滾動框的和滾動條箭頭右下邊緣的顏色
scrollbar-dark-shadow-color IE特有屬性 IE5.5+ y 設定滾動條槽的顏色
scrollbar-base-color IE特有屬性 IE5.5+ y 設定滾動條主要構成部分的顏色
scrollbar-track-color IE特有屬性 IE5.5+ y 設定滾動條軌跡組成部分的顏色
為了有助於理解IE中滾動條樣式的控制，你可以檢視如下的圖片：
ie-css-scroll
經過不斷的測試發現，在Win8 下面，有一部分樣式都起著相同的作用。估計是因為在Win8中扁平化的介面設計而重新定議了系統中滾動條！以下是Win 8下面的滾動條樣式，並寫出了和CSS支援的情況：
win-8–ie—scrollbar
以上所寫的幾個四個CSS屬性，足以控制Win 8系統下，IE瀏覽器的滾動條樣式了。但經過測試，發現，其它的四個屬性仍然支援（主要是在以上幾個屬性空缺時，就會體現其作用）。具體如下：
關於scrollbar-track-color，scrollbar-face-color與scrollbar-base-color。直接看英語單詞，你就也許能明白scroll-base-color是一個備用顏色，只要前兩者未設定時，它就開始起作用了。但是你得注意，當scrollbar-base-color用來作scrollbar-track-color功能來用時，你會發現，實際顏色與設定的顏色要淡一點。不信你可以這樣試試：只設置一下scrollbar-base-color看看滾動條的效果。
關於scrollbar-dark-shadow-color屬性，通過測試發現Win 8下IE10，IE11滾動條並沒有改變。可能是win 8的滾動條重新定義了，導致沒有了隱影了吧！（僅個人猜想）
通過觀察我們發現，Win 8下的滾動條中，上箭頭和下箭頭後面的背景顏色都已經從scroll-face-color中脫離出來了，從屬於scroll-track-color屬性控制。
感覺IE瀏覽器滾動條自定製功能並不是很強，只能控制一樣顯示各個部分的顏色而已，像寬度，結構等都無法控制，要靠出個性點的滾動條，很難！很難！！！
自定義FireFox瀏覽器滾動條
在網上找了很多關於Firfox自定義瀏覽器滾動條的方法，發現firefox中卻實是不支援的。發現了幾篇說可以更改，自已也跟著程式碼寫了幾次（不知是我錯了還是。。。），發現卻是不起作用。以下是一點小的收穫：
複製
@-moz-document url-prefix(http://),url-prefix(https://) {
/* 滾動條顏色 */
scrollbar {
-moz-appearance: none !important;
background: rgb(0,255,0) !important;
}
/* 滾動條按鈕顏色 */
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color: rgb(0,0,255) !important;
}
/* 滑鼠懸停時按鈕顏色 */
thumb:hover,scrollbarbutton:hover {
-moz-appearance: none !important;
background-color: rgb(255,0,0) !important;
}
/* 隱藏上下箭頭 */
scrollbarbutton {
display: none !important;
}
/* 縱向滾動條寬度 */
scrollbar[orient="vertical"] {
min-width: 15px !important;
}
}
實測以上程式碼並不起作用。但也可能是我的瀏覽器的版本不對吧！你可以試試，要是有效的話，你可以把你的FF版本發表在文章評論裡面。
下面給兩個關於FF滾動條的討論(你多少web開發者希望FF能夠像webkit核心瀏覽器一樣程度的來支援滾動條自定義)：
在所有瀏覽器，滾動條可定製性最強的當屬webkit核心的瀏覽器了。因為原始碼開放的原因，市面上基於webkit核心的瀏覽器也是很難窮舉完。例如有：Google Chrome、Opera（opera最近宣佈使用webkit核心了）、360極速瀏覽器，獵豹瀏覽器等，搜狗瀏覽器······
下面我們來看一下webkit瀏覽器是如何強大的吧！
複製
CSS
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
以上CSS程式碼所管轄的區域對就關係：以上註釋中的數字與下圖中數字相對應。
scrollbarparts
上圖正如如下所言：
::-webkit-scrollbar 滾動條整體部分，其中的屬性有width,height,background,border（就和一個塊級元素一樣）等。
::-webkit-scrollbar-button 滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以新增背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track 外層軌道。可以用display:none讓其不顯示，也可以新增背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）。
::-webkit-scrollbar-thumb 滾動條裡面可以拖動的那部分
::-webkit-scrollbar-corner 邊角
::-webkit-resizer 定義右下角拖動塊的樣式
注意：對以上各個部分定義width,height時。有如下功能：若是水平滾動條，則width屬性不起作用，height屬性用來控制滾動條相應部分豎直方向高度；若是豎直滾動條，則height屬性不起作用，width屬性用來控制相應部分的寬度。
能過上面的不斷的測試。在Chrome中，滾動條中的各個部分和DOM中塊級元素是一樣的。通過::-webkit-scrollbar等就類似於原來所說的CSS中的選擇器。而{}中的屬性，你就像控制一般塊級元素一樣簡單（強大啊）。
請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。小天地，大世界是一個Web前端的技術部落格。 主要是關於HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還包含一些PHP語言等的實用例子。
請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。小天地，大世界是一個Web前端的技術部落格。 主要是關於HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還包含一些PHP語言等的實用例子。
請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。小天地，大世界是一個Web前端的技術部落格。 主要是關於HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還包含一些PHP語言等的實用例子。
請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。小天地，大世界是一個Web前端的技術部落格。 主要是關於HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還包含一些PHP語言等的實用例子。
對應的原始碼如下：
CSS部分程式碼：
複製
#scroll-1 {
width:200px;
height:200px;
overflow:auto;
}
#scroll-1 div {
width:400px;
height:400px;
} #scroll-1::-webkit-scrollbar {
width:10px;
height:10px;
}
#scroll-1::-webkit-scrollbar-button {
background-color:#FF7677;
}
#scroll-1::-webkit-scrollbar-track {
background:#FF66D5;
}
#scroll-1::-webkit-scrollbar-track-piece {
background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);
}
#scroll-1::-webkit-scrollbar-thumb{
background:#FFA711;
border-radius:4px;
}
#scroll-1::-webkit-scrollbar-corner {
background:#82AFFF;
}
#scroll-1::-webkit-scrollbar-resizer {
background:#FF0BEE;
}
HTML結構：
複製
請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。
小天地，大世界是一個Web前端的技術部落格。 主要是關於
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還
包含一些PHP語言等的實用例子。
請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。
小天地，大世界是一個Web前端的技術部落格。 主要是關於
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還
包含一些PHP語言等的實用例子。
請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。
小天地，大世界是一個Web前端的技術部落格。 主要是關於
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還
包含一些PHP語言等的實用例子。
請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。
小天地，大世界是一個Web前端的技術部落格。 主要是關於
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還
包含一些PHP語言等的實用例子。
請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。
小天地，大世界是一個Web前端的技術部落格。 主要是關於
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還
包含一些PHP語言等的實用例子。
通過以上，我們幾乎就可以來重寫網站的滾動條了，但是webkit提供的還有更多的偽類，可以定製更豐富滾動條樣式。本文以下內容參考：https://www.webkit.org/blog/363/styling-scrollbars/
:horizontal horizontal 偽類，主要應用於選擇水平方向滾動條。
:vertical vertical偽類主要是應用於選擇豎直方向滾動條
:decrement decrement偽類應用於按鈕和內層軌道(track piece)。它用來指示按鈕或者內層軌道是否會減小視窗的位置(比如，垂直滾動條的上面，水平滾動條的左邊。)
:increment increment偽類與和decrement類似，用來指示按鈕或內層軌道是否會增大視窗的位置(比如，垂直滾動條的下面和水平滾動條的右邊。)
:start start偽類也應用於按鈕和滑塊。它用來定義物件是否放到滑塊的前面。
:end 類似於start偽類，標識物件是否放到滑塊的後面。
:double-button 該偽類可以用於按鈕和內層軌道。用於判斷一個按鈕是不是放在滾動條同一端的一對按鈕中的一個。對於內層軌道來說，它表示內層軌道是否緊靠一對按鈕。
:single-button 類似於double-button偽類。對按鈕來說，它用於判斷一個按鈕是否自己獨立的在滾動條的一段。對內層軌道來說，它表示內層軌道是否緊靠一個single-button。
:no-button 用於內層軌道，表示內層軌道是否要滾動到滾動條的終端，比如，滾動條兩端沒有按鈕的時候。
:corner-present 用於所有滾動條軌道，指示滾動條圓角是否顯示。
:window-inactive 用於所有的滾動條軌道，指示應用滾動條的某個頁面容器(元素)是否當前被啟用。(在webkit最近的版本中，該偽類也可以用於::selection偽元素。webkit團隊有計劃擴充套件它並推動成為一個標準的偽類)
另外，:enabled、:disabled、:hover、和:active等偽類同樣在滾動條中適用。