• css滾動條樣式修改很常見，首先需要了解滾動條的一些屬性

滾動條的組成：

::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb 滾動條裡面的小方塊，能上下左右移動
::-webkit-scrollbar-track 滾動條的軌道
::-webkit-scrollbar-button 滾動條軌道兩端的按鈕，允許通過點選微調小方塊的位置
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-corner 邊角，及兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控制元件

• 就直接上程式碼了

//table-box為父級，也可在全域性直接使用::-webkit-scrollbar
.table-box::-webkit-scrollbar {
  width: 4px;
}

.table-box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px linear-gradient(rgb(126, 238, 255), rgb(83, 155, 255));
  background-image: linear-gradient(rgb(126, 238
 
, 255), rgb(83, 155, 255))
}

.table-box::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgb(26, 31, 40);
  border-radius: 0;
  background: rgb(26, 31, 40);
}

• 效果圖（有點簡陋了，一個漸變色的滾動條）
  
• 如果需要隱藏滾動條

//也可在::前搭配父級class名使用
::-webkit-scrollbar {
	border-width:1px;
}