內容超出容器時，容器會出現滾動條，其自帶的滾動條有時無法滿足我們審美要求，那么我們可以通過css偽類來實現對滾動條的自定義。
首先我們要了解滾動條。滾動條從外觀來看是由兩部分組成：1，可以滑動的部分，我們叫它滑塊2，滾動條的軌道，即滑塊的軌道，一般來說滑塊的顏色比軌道的顏色深。
滾動條的css樣式主要有三部分組成：
1、::-webkit-scrollbar 定義了滾動條整體的樣式；
2、::-webkit-scrollbar-thumb 滑塊部分；
3、::-webkit-scrollbar-thumb 軌道部分；
下面以overflow-y:auto;為例（overflow-x:auto同）
html代碼：
<div class="test test-1">
<
div
class="scrollbar"></
div
>
</
div
>
css代碼：
.test{
width
:
50px
;
height
:
200px
;
overflow
:
auto
;
float
:
left
;
margin
:
5px
;
border
:
none
;
}
.scrollbar{
width
:
30px
;
height
:
300px
;
margin
:
0
auto
;
}
.test
-1:
:-webkit-scrollbar {
/*滾動條整體樣式*/
width
:
5px
;
/*高寬分別對應橫豎滾動條的尺寸*/
height
:
1px
;
}
.test
-1:
:-webkit-scrollbar-thumb {
/*滾動條里面小方塊*/
border-radius:
10px
;
background
:
#;
}
.test
-1:
:-webkit-scrollbar-track {
/*滾動條里面軌道*/
border-radius:
10px
;
background
:
#EDEDED
;
}
如果要改變滾動條的寬度：在::-webkit-scrollbar中改變即可；如果要改變滾動條滑塊的圓角，
在::-webkit-scrollbar-thumb 中改變；
如果要改軌道的圓角在::-webkit-scrollbar-track中改變；