CSS3 设置滚动条主要有下面七个属性：

可以全局设置，也可以对单个div进行设置

/* 滚动条整体部分，可以设置宽度等 */
body::-webkit-scrollbar{
   
     
     }
/* 滚动条两端的按钮 */
body::-webkit-scrollbar-button{
   
     
     }
/* 外层轨道 */
body::-webkit-scrollbar-track{
   
     
     }
/* 内层滚动槽 */
body::-webkit-scrollbar-track-piece{
   
     
     }
/* 滚动的滑块 */
body::-webkit-scrollbar-thumb{
   
     
     }
/* 边角 */
body::-webkit-scrollbar-corner{
   
     
     }
/* 定义右下角拖动块的样式 */
body::-webkit-resizer{
   
     
     }

例如可以按照下面直接设置

/* 设置滚动条的样式 */
::-webkit-scrollbar {
   
     
     
  width: 5px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
   
     
     
  border-radius: 10px;
  background: rgba(117, 146, 168, 1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

/* 内层滚动槽 */
::-webkit-scrollbar-track-piece {
   
     
     
  width: 2px;
  background: rgba(30, 52, 68, 1);
}

其他的就自己测试吧。

CSS 滚动条样式