1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*谷歌、safari、qq浏览器、360浏览器滚动条样式*/
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 110px;
background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #009688;
}

/*滑块效果*/
::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.4);
}

/*IE滚动条颜色*/
html {
scrollbar-face-color: #009688; /*滚动条颜色*/
scrollbar-highlight-color: #000;
scrollbar-3dlight-color: #000;
scrollbar-darkshadow-color: #000;
scrollbar-Shadow-color: #adadad; /*滑块边色*/
scrollbar-arrow-color: rgba(0, 0, 0, 0.4); /*箭头颜色*/
scrollbar-track-color: #eeeeee; /*背景颜色*/
}