頁面自定義滾動條

滾動條的組成部分：

• ::-webkit-scrollbar 滾動條總體部分
• ::-webkit-scrollbar-thumb  滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決因而垂直滾動條仍是水平滾動條）
• ::-webkit-scrollbar-track  滾動條的軌道（裏面裝有Thumb）
• ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，容許經過點擊微調小方塊的位置。
• ::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
• ::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處
• ::-webkit-resizer 兩個滾動條的交匯處上用於經過拖動調整元素大小的小控件

eg：

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #234d77;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: white;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #234d77;
}