前面的話：對只有一種瀏覽器支持的屬性，就不要出來秀咱前端同學，就像是早些年手機們的充電口一樣，集各家所長，咱今天說的是webkit的滾動條樣式，視乎只有webkit支持此項定義，有見識的前輩來辯。這玩意兒也就可以玩玩，漲漲見識，跑跑PC版的谷歌，UC...親測，在移動端完全不支持

這是一個簡短的小短文：
** 屬性寫哪，用的是偽類，直接寫在css文件中，帶上::雙引號**

------------
主要有以下屬性，一眼望到頭

::-webkit-scrollbar-track { background-color: #b46868; /*定義外層軌道*/ }
::-webkit-scrollbar-thumb {  background-color: rgba(0, 0, 0, 0.2); /*定義滑塊*/ }
/*::-webkit-scrollbar-button { background-color: #7c2929; /*定義兩端按鈕，已經定義沒有按鈕啦*/ }*/ 
::-webkit-scrollbar-corner {background-color: black; /*可不定義，但必須加上*/ }
::-webkit-scrollbar{width:1em; height:100%;} /*整體設置寬高*/
::-webkit-scrollbar-track-piece{background-color:transparent;} /*內層軌道設置顏色值*/
body::-webkit-scrollbar-track-piece{background-color:#ccc;} /*在body中的內層軌道置一個顏色*/
::-webkit-scrollbar-track-piece:no-button{} /*沒有兩端的按鈕*/
::-webkit-scrollbar-thumb{background-color:#29944d;border-radius: 2px;} /*滑塊的樣式，顏色值，和圓角*/
::-webkit-scrollbar-thumb:hover{background-color:red;} /*鼠標經過滑塊的反饋*/
::-webkit-scrollbar-thumb:active{background-color:#0eaf52;} /*鼠標在滑塊之上的顏色值*/26 body{height: 2000px;}

直接上效果：

871918-20160329204355691-1574893148.jpg

871918-20160329204453941-867653776.jpg

871918-20160329204508441-1809627313.jpg

PC端： 不支持的有,IE（廢話嘛），火狐
移動端： 完全不支持

后語：
這屬性在我的眼中沒啥的使用價值，也許是眼光還不夠，說不定以后還玩出新花樣呢

最近發現移動端的UC居然不支持flex，UC你是想上天嗎，果斷發建議，得到的回答是“兩天后給您答復哦”，我等著呢。在測試中，除了操蛋的手機版UC不支持好用的flex外，其他手機瀏覽器（包括國產的qq瀏覽器，360，百度等，包括國際品牌谷歌，火狐等）無一例外，支持。