对于chrome浏览器，它提供了修改滚动条样式的接口，开发者只需要加上几句css脚本，就可轻松实现滚动条样式的修改.
先说一下滚动条的参数：
1
2
3
4
5
6
7
::-webkit-scrollbar /*滚动条整体部分，可以设置宽度啥的*/
::-webkit-scrollbar-button /*滚动条两端的按钮*/
::-webkit-scrollbar-track /*外层轨道*/
::-webkit-scrollbar-track-piece /*内层滚动槽*/
::-webkit-scrollbar-thumb /*滚动的滑块*/
::-webkit-scrollbar-corner /*边角*/
::-webkit-resizer /*定义右下角拖动块的样式*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #bbb;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}