CSS设置自定义滚动条样式（兼容IE）
经常写页面的同学都知道，浏览器一般自带的滚动条样式很丑，和页面风格格格不入，于是就想着是否能够改变原有滚动条样式？但实际中，其他浏览器又和IE浏览器不一样，导致兼容性不好。兼容代码如下：
.box{
overflow-x: scroll;
overflow-y: hidden;
width: 152px;
height: 30px;
font-size: 12px;
font-weight: 400;
text-align: center;
line-height: 32px;
letter-spacing: 0;
}
.box{
/*IE无法设置浏览器的宽度、高度，只能隐藏，并不影响滑动*/
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-ms-overflow-style: none;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #37C5E6;
/*滚动条整体颜色*/
scrollbar-highlight-color: #37C5E6;
/*滚动条轨道颜色*/
scrollbar-track-color: #42BCEE;
/*三角箭头的颜色*/
scrollbar-arrow-color: #fff;
/*滚动条阴影*/
scrollbar-shadow-color: #37C5E6;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color:#37C5E6;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #37C5E6;
/*滚动条基准颜色*/
scrollbar-base-color: #37C5E6;
}
/* -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性 滚动条整体部分，可以设置宽度等*/
.box::-webkit-scrollbar{
background-color: #37C5E6;
width:5px;
height:2px;
}
/*滚动条的轨道*/
.box::-webkit-scrollbar-track{
background-color: #37C5E6;
border-radius: 10px;
}
/*滚动条的滑块按钮*/
.box::-webkit-scrollbar-thumb{
border-radius: 10px;
background-color: #42BCEE;
}
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
上次更新: 2024/01/30, 00:35:17