CSS修改滚动条样式

滚动条的默认样式：

滚动条样式修改：

 

::-webkit-scrollbar ​        滚动条整体部分
​::-webkit-scrollbar-button  滚动条两端的按钮 （设置滚动条整体样式,两端按钮图标消失,可重新设置图片、新样式）
​::-webkit-scrollbar-track ​  外层轨道
​::-webkit-scrollbar-track-piece​ 内层轨道 （覆盖外层轨道 scrollbar-track 的样式）

​::-webkit-scrollbar-thumb​                    内嵌滑块
::-webkit-scrollbar-thumb:hover              滑块悬浮
::-webkit-scrollbar-thumb:vertical:hover   纵向滑块悬浮
::-webkit-scrollbar-thumb:horizontal:hover 横向滑块悬浮

​::-webkit-scrollbar-corner​      边角
​::-webkit-resizer               ​定义右下角拖动块的样式

修改样式代码：

// 滚动条整体样式
.innerbox::-webkit-scrollbar{
  width: 4px;
}
// 滚动条内嵌滑块
.innerbox::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background: rgba(0,0,0,0.2);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
// 滚动条边角
.innerbox::-webkit-scrollbar-corner{
  border-radius: 0;
  background: rgba(0,0,0,0.1);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
}