html滚动条样式

直接复制到CSS就行了

样式1

/*整体部分*/
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
/*边角*/
::-webkit-scrollbar-corner {
  background-color: transparent;
}
/*滑块*/
::-webkit-scrollbar-thumb {
  height: 6px;
  border-radius: 7px;
  border: 4px solid transparent;
  background-color: #ddd;
  background-clip: padding-box;
}

样式2

/*滚动条样式*/
::-webkit-scrollbar-track-piece {
  scrollbar-arrow-color: #ff0000;/*三角箭头的颜色*/
  scrollbar-face-color: #000;/*立体滚动条的颜色（包括箭头部分的背景色）*/
  scrollbar-3dlight-color: #302D30;/*立体滚动条亮边的颜色*/
  scrollbar-highlight-color: #302D30;/*滚动条的高亮颜色（左阴影？）*/
  scrollbar-shadow-color: #302D30;/*立体滚动条阴影的颜色*/
  scrollbar-darkshadow-color: #302D30;/*立体滚动条外阴影的颜色*/
  scrollbar-track-color: #302D30;/*立体滚动条背景颜色*/
  scrollbar-base-color: #ff0000;/*滚动条的基色*/
}
::-webkit-scrollbar {/*整体部分*/
  width: 10px;
  height: 8px;
  background-color: #ff00ff;
  -webkit-border-radius: 0px;/*圆形边框*/
}
::-webkit-scrollbar-thumb {/*滑块*/
  height: 50px;
  background-color: #1E9FFF;
  -webkit-border-radius: 0px;
  outline-offset: -2px;
  border: 2px solid #00CCFF;
}
::-webkit-scrollbar-thumb:hover {/*滑块效果*/
  height: 50px;
  background-color: #ff0000;
  -webkit-border-radius: 0px;
}