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