1、滚动条整体部分
使用 ::-webkit-scrollbar
注意
:这个必须要加,不然修改的样式不生效
::-webkit-scrollbar { width: 10px;//修改滚动条宽度 }
2、滚动条中的滑块
使用 ::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb { border-radius: 8px; background: #d2eafb; }
3、滚动条中的外层轨道
使用 ::-webkit-scrollbar-track
::-webkit-scrollbar-track { border-radius: 8px; background: #eeeeee; }
4、滚动条中的两端箭头按钮
使用 ::-webkit-scrollbar-button
::-webkit-scrollbar-button { background: #eeeeee; }
5、水平方向和垂直方向滚动条交接处
使用 ::-webkit-scrollbar-corner
::-webkit-scrollbar-corner { background-color: transparent; }
6、单独设置水平方向或垂直方向滚动条样式
水平方向上的滚动条::horizontal
垂直方向上的滚动条::vertical
//水平方向滚动条 ::-webkit-scrollbar:horizontal { width: 10px; } //垂直方向滚动条 ::-webkit-scrollbar:vertical { width: 20px; }