滚动条的默认样式:
滚动条样式修改:
::-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);
}