介紹之前，先穿插一個小知識點，大神略過；
經常看見 在css屬性前加上-webkit之類的代碼，也就是相容不同浏覽器的代碼；
-webkit 相容chrome（谷歌）、safari（MacOS端浏覽器）；
-moz 相容firefox（火狐）；
-ms 相容ie；
為什麼講這個，因為：修改滾動條樣式隻有谷歌支援；
是以：以下css屬性直接根據需求帶走；
::-webkit-scrollbar 滾動條整體，相當于包在最外面的父盒子
::-webkit-scrollbar-thumb 滾動條裡面的小方塊（可以刺溜刺溜移動的那個）
::-webkit-scrollbar-track 滾動條的軌道（你就了解成父盒子的背景）
::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕
::-webkit-scrollbar-track-piece 内層軌道（就是track減去thumb剩餘部分）
::-webkit-scrollbar-corner 邊角，垂直和水準兩個滾動條的交彙處
::-webkit-resizer 放在兩個滾動條的交彙處，用于拖動調整元素大小的控件
用法：
我放一個滾動條demo，直接拉走就有效果（前提是相容）；
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<title>-webkit-scrollbar</title>
</head>
<style>
/*先寫好基礎樣式,可以忽略，為了更清楚顯示效果*/
.panel {
width: 300px;
height: 200px;
margin: 0 auto;
background: #242424;
overflow-y: scroll;
}
.inner {
height: 600px;
}
.inner li {
height: 18%;
margin: 2px 0;
background: #009678;
}
/*從這裡開始滾動條走起*/
.panel::-webkit-scrollbar {
width: 10px;
}
/*滑塊*/
.panel::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #e0e0e0;
-webkit-box-shadow: 0 0 5px #fff inset;
}
/*軌道*/
.panel::-webkit-scrollbar-track {
background: rgba(255, 255, 255, .3);
}
/*按鈕*/
.panel::-webkit-scrollbar-button {
height: 10px;
background: #81bd01;
}
</style>
<body>
<div class="panel">
<div class="inner">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</div>
</div>
</body>
</html>
說白了就是使用的僞元素實作的；
别告訴我這帶上空格才幾十行的代碼看不懂，不信！
![modern-normalize vs normalize.css[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)