因為寫出來的默認(rèn)樣式被測試MM說太丑了，所以上網(wǎng)找了一些資料岖常，通過css來修改滾動條樣式驯镊。百度了挺多，最中意的還是這個
作者:楊博客
原貼：http://www.cnblogs.com/520yang/articles/5098352.html
因為可以自己寫樣式竭鞍，而且寫出來的視覺效果也還不錯板惑，所以就自己試了一下，谷歌瀏覽器效果圖如下：
直接上代碼：
CSS:
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.inner {
width: 265px;
height: 400px;
position: absolute;
top: 33px;
left: 13px; /*cursor: pointer;*/
overflow: auto;
margin: 100px auto;
}
.innerbox {
overflow-x: hidden;
overflow-y: auto;
color: #000;
font-size: .7rem;
font-family: "/5FAE/8F6F/96C5/9ED1", Helvetica, "黑體", Arial, Tahoma;
height: 100%;
}
/*滾動條樣式*/
.innerbox::-webkit-scrollbar { /*滾動條整體樣式*/
width: 20px; /*高寬分別對應(yīng)橫豎滾動條的尺寸*/
height: 5px;
}
.innerbox::-webkit-scrollbar-thumb { /*滾動條里面小方塊*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
.innerbox::-webkit-scrollbar-track { /*滾動條里面軌道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
.innerbox::-webkit-scrollbar-button { /*滾動條里面軌道里上下按鈕*/
width: 20px;
height: 20px;
/*border: 20px solid rgba(0, 0, 0, 0.5);*/
/*border-bottom: none;*/
background: rgba(0, 0, 0, 0.5);
}
.innerbox::-webkit-scrollbar-track-piece{/*內(nèi)層軌道笼蛛，滾動條中間部分（除去）*/
width: 20px;
height: 20px;
background: rgba(249, 126, 246, 0.5);
}
}
</style>
HTML:
<div class="inner">
<div class="innerbox">
<p style="height:200px;">這是內(nèi)容111</p>
<p style="height:400px;">這里是內(nèi)容222</p>
<p>這里是內(nèi)容333</p>
</div>
</div>
詳細(xì)設(shè)置
定義滾動條就是利用偽元素與偽類洒放，那什么是偽元素和偽類呢蛉鹿？
偽類大家應(yīng)該很熟悉:link,:focus,:hover滨砍，此外CSS3中又增加了許多偽類選擇器，如:nth-child妖异，:last-child惋戏，:nth-last-of-type()等。
CSS中的偽元素大家以前看過：:first-line,:first-letter,:before,:after他膳。那么在CSS3中响逢，偽元素進(jìn)行了調(diào)整，在以前的基礎(chǔ)上增加了一個“：”也就是現(xiàn)在變成了“::first-letter,::first-line,::before,::after”棕孙，另外CSS3還增加了一個“::selection”舔亭。兩個“：：”和一個“：”在css3中主要用來區(qū)分偽類和偽元素些膨。
webkit的偽類和偽元素的實現(xiàn)很強(qiáng)，可以把滾動條當(dāng)成一個頁面元素來定義钦铺，再結(jié)合一些高級的CSS3屬性订雾，比如漸變、圓角矛洞、RGBa等等洼哎。然后如果有些地方要用圖片，可以把圖片也可以轉(zhuǎn)換成Base64沼本，不然每次都得加載那個多個圖片噩峦，增加請求數(shù)。
:horizontal
//horizontal偽類適用于任何水平方向上的滾動條
:vertical
//vertical偽類適用于任何垂直方向的滾動條
:decrement
//decrement偽類適用于按鈕和軌道碎片抽兆。表示遞減的按鈕或軌道碎片识补，例如可以使區(qū)域向上或者向右移動的區(qū)域和按鈕
:increment
//increment偽類適用于按鈕和軌道碎片。表示遞增的按鈕或軌道碎片郊丛，例如可以使區(qū)域向下或者向左移動的區(qū)域和按鈕
:start
//start偽類適用于按鈕和軌道碎片李请。表示對象（按鈕 軌道碎片）是否放在滑塊的前面
:end
//end偽類適用于按鈕和軌道碎片。表示對象（按鈕 軌道碎片）是否放在滑塊的后面
:double-button
//double-button偽類適用于按鈕和軌道碎片厉熟。判斷軌道結(jié)束的位置是否是一對按鈕导盅。也就是軌道碎片緊挨著一對在一起的按鈕。
:single-button
//single-button偽類適用于按鈕和軌道碎片揍瑟。判斷軌道結(jié)束的位置是否是一個按鈕白翻。也就是軌道碎片緊挨著一個單獨的按鈕。
:no-button
no-button偽類表示軌道結(jié)束的位置沒有按鈕绢片。
:corner-present
//corner-present偽類表示滾動條的角落是否存在滤馍。
:window-inactive
//適用于所有滾動條，表示包含滾動條的區(qū)域底循，焦點不在該窗口的時候巢株。
::-webkit-scrollbar-track-piece:start {
/*滾動條上半邊或左半邊*/
}
::-webkit-scrollbar-thumb:window-inactive {
/*當(dāng)焦點不在當(dāng)前區(qū)域滑塊的狀態(tài)*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*當(dāng)鼠標(biāo)在水平滾動條下面的按鈕上的狀態(tài)*/
}
