修改浏览器默认滚动条
作为一个有理想的程序员, 页面好看与否直接决定了你是不是一个合格的前端, 而作为页面一部分 -- 滚动条, 直接影响了页面的美观
那么如何修改滚动条的样式呢? 要么使用 js(代表者 - jQuery), 要么使用 css
关于 jQuery 滚动条插件网上一大堆, 就不介绍了
下面重点介绍通过 css 来修改原生滚动条样式
# 修改默认滚动条样式
注:
以下特性是非标准的，请尽量不要在生产环境中使用它！--MDN
@theme_main: #409eff;
@scroll_bg: transparent;
@scroll_width: 6px;
body,
html {
height: 100%;
/* 三角箭头的颜色 transparent 无效 */
scrollbar-arrow-color: rgba(244, 244, 244, 0.1);
/* 立体滚动条的颜色 */
scrollbar-face-color: fade(@theme_main, 50%);
/* 立体滚动条亮边的颜色 */
scrollbar-3dlight-color: @scroll_bg;
/* 滚动条空白部分的颜色 */
scrollbar-highlight-color: @scroll_bg;
/* 立体滚动条阴影的颜色 */
scrollbar-shadow-color: @scroll_bg;
/* 立体滚动条强阴影的颜色 */
scrollbar-darkshadow-color: @scroll_bg;
/* 立体滚动条背景颜色 */
scrollbar-track-color: @scroll_bg;
/* 滚动条的基本色 */
scrollbar-base-color: @scroll_bg;
/* 滚动条自动隐藏 */
-ms-overflow-style: -ms-autohiding-scrollbar;
}
/* 整个滚动条 */
::-webkit-scrollbar {
width: @scroll_width;
height: @scroll_width;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 @scroll_width @scroll_bg;
box-shadow: inset 0 0 @scroll_width @scroll_bg;
-webkit-border-radius: @scroll_width;
border-radius: @scroll_width;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
background: fade(@theme_main, 50%);
border-radius: @scroll_width;
.enable-trans();
&:hover {
background: fade(@theme_main, 80%);
}
}
/* 滚动条上的按钮 (上下箭头) */
::-webkit-scrollbar-button {
display: none;
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
background: @scroll_bg;
}
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
56
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
56
# 参考资料
# 隐藏滚动条
编辑 (opens new window)
上次更新: 5/27/2023, 1:02:05 PM