如果覺得瀏覽器自帶的滾動條不是很美觀的話野崇，可以參考以下寫法酒贬，使你的滾動條變得賞心悅目。
注意 兼容所有瀏覽器的滾動條樣式袜炕，目前應該是還沒有的。
::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb 滾動條里面的小方塊初家，能上下左右移動（取決于是垂直滾動條還是水平滾動條）
::-webkit-scrollbar-track 滾動條的軌道（里面裝有thumb）
::-webkit-scrollbar-button 滾動條軌道兩端的按鈕偎窘，允許通過點擊微調(diào)小方塊的位置
::-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-corner 邊角溜在，及兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件
/*定義滾動條寬高及背景陌知，寬高分別對應橫豎滾動條的尺寸*/
.scrollbar::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #f5f5f5;
}
/*定義滾動條的軌道，內(nèi)陰影及圓角*/
.scrollbar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
background-color: #f5f5f5;
}
/*定義滑塊掖肋，內(nèi)陰影及圓角,寬高分別對應橫豎滑塊的尺寸*/
.scrollbar::-webkit-scrollbar-thumb {
width: 10px;
height: 20px;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #A8A8A8;
}
