相信很(hěn)多(duō)人(rén)都遇到過在設計(jì)中自定義滾動條樣式的情景，之前我都是努力說服設計(jì)師(shī)接受浏覽器(qì)自帶的滾動條樣式，但(dàn)是這樣隻能規避還(hái)是解決不了問題，最近在項目中遇到了，正好來(lái)總結一下。當然，兼容所有(yǒu)浏覽器(qì)的滾動條樣式目前是不存在的。
IE下的滾動條樣式
IE是最早提供滾動條的樣式支持，好多(duō)年了，但(dàn)是其它浏覽器(qì)一直沒有(yǒu)支持，IE獨孤求敗了。
這些(xiē)樣式規則很(hěn)簡單：
scrollbar-arrow-color: color; /*三角箭頭的顔色*/
scrollbar-face-color: color; /*立體(tǐ)滾動條的顔色(包括箭頭部分的背景色)*/
scrollbar-3dlight-color: color; /*立體(tǐ)滾動條亮邊的顔色*/
scrollbar-highlight-color: color; /*滾動條的高(gāo)亮顔色(左陰影(yǐng)?)*/
scrollbar-shadow-color: color; /*立體(tǐ)滾動條陰影(yǐng)的顔色*/
scrollbar-darkshadow-color: color; /*立體(tǐ)滾動條外陰影(yǐng)的顔色*/
scrollbar-track-color: color; /*立體(tǐ)滾動條背景顔色*/
scrollbar-base-color: color; /*滾動條的基色*/
大(dà)概就這些(xiē)，你(nǐ)也可(kě)以定義cursor來(lái)定義滾動條的鼠标手勢。
選中CSS選項即可(kě)自動生(shēng)成CSS樣式，這裏不再過多(duō)的介紹了。嗯，多(duō)謝大(dà)貓老濕推薦。
webkit的自定義滾動條樣式
yes，這裏才是今天要重點介紹的。
從上(shàng)一部分的樣式名中就可(kě)以看到，IE隻能定義相關部分的color等屬性，這樣太不靈活了。
不過，webkit不再是用簡單的幾個(gè)CSS屬性，而是一坨的CSS僞元素：
-webkit-scrollbar 滾動條整體(tǐ)部分
-webkit-scrollbar-button 滾動條兩端的按鈕
-webkit-scrollbar-track 外層軌道(dào)
-webkit-scrollbar-track-piece 內(nèi)層軌道(dào)，滾動條中間(jiān)部分(除去)
-webkit-scrollbar-thumb (拖動條?滑塊?滾動條裏面可(kě)以拖動的那(nà)個(gè)，腫麽翻譯好呢?)
-webkit-scrollbar-corner 邊角
-webkit-resizer 定義右下角拖動塊的樣式
通(tōng)過這些(xiē)僞元素，可(kě)以完全的重寫一個(gè)網站(zhàn)的滾動條樣式。
當然webkit提供的不止這些(xiē)，還(hái)有(yǒu)很(hěn)多(duō)僞類，可(kě)以更豐富滾動條樣式：
:horizontal – horizontal僞類應用于水(shuǐ)平方向的滾動條
:vertical – vertical僞類應用于豎直方向的滾動條
:decrement – decrement僞類應用于按鈕和(hé)內(nèi)層軌道(dào)(track piece)。它用來(lái)指示按鈕或者內(nèi)層軌道(dào)是否會(huì)減小(xiǎo)視(shì)窗的位置(比如，垂直滾動條的上(shàng)面，水(shuǐ)平滾動條的左邊。)
:increment – increment僞類和(hé)decrement類似，用來(lái)指示按鈕或內(nèi)層軌道(dào)是否會(huì)增大(dà)視(shì)窗的位置(比如，垂直滾動條的下面和(hé)水(shuǐ)平滾動條的右邊。)
:start – start僞類也應用于按鈕和(hé)滑塊。它用來(lái)定義對象是否放到滑塊的前面。
:end – 類似于start僞類，标識對象是否放到滑塊的後面。
:double-button – 該僞類以用于按鈕和(hé)內(nèi)層軌道(dào)。用于判斷一個(gè)按鈕是不是放在滾動條同一端的一對按鈕中的一個(gè)。對于內(nèi)層軌道(dào)來(lái)說，它表示內(nèi)層軌道(dào)是否緊靠一對按鈕。
:single-button – 類似于double-button僞類。對按鈕來(lái)說，它用于判斷一個(gè)按鈕是否自己獨立的在滾動條的一段。對內(nèi)層軌道(dào)來(lái)說，它表示內(nèi)層軌道(dào)是否緊靠一個(gè)single-button。
:no-button – 用于內(nèi)層軌道(dào)，表示內(nèi)層軌道(dào)是否要滾動到滾動條的終端，比如，滾動條兩端沒有(yǒu)按鈕的時(shí)候。
:corner-present – 用于所有(yǒu)滾動條軌道(dào)，指示滾動條圓角是否顯示。
:window-inactive – 用于所有(yǒu)的滾動條軌道(dào)，指示應用滾動條的某個(gè)頁面容器(qì)(元素)是否當前被激活。(在webkit最近的版本中，該僞類也可(kě)以用于：：selection僞元素。webkit團隊有(yǒu)計(jì)劃擴展它并推動成為(wèi)一個(gè)标準的僞類)
另外，:enabled、:disabled、:hover 和(hé) :active 等僞類同樣可(kě)以用于滾動條中。
關于具體(tǐ)的demo，這裏不再做(zuò)了，網上(shàng)已經有(yǒu)很(hěn)多(duō)demo可(kě)以參考，比如，webkit官方的這個(gè)，具體(tǐ)的線上(shàng)項目中也有(yǒu)現成的例子，比如，QQ空(kōng)間(jiān)的簽到彈出框和(hé)豆瓣說的右側詳情欄(某條信息評論多(duō)的時(shí)候會(huì)顯示)。
值得(de)一提的是，webkit的這個(gè)僞類和(hé)僞元素的實現很(hěn)強大(dà)，雖然類目有(yǒu)些(xiē)多(duō)，但(dàn)是我們可(kě)以把滾動條當成一個(gè)頁面元素來(lái)定義，也差不多(duō)可(kě)以用上(shàng)一些(xiē)高(gāo)級的CSS3屬性，比如漸變、圓角、RGBa等等，當然有(yǒu)些(xiē)地方也可(kě)以用圖片，然後圖片也可(kě)以轉換成Base64，總之，可(kě)以盡情發揮了。
