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