# 隐藏滚动条
直接使用 hideScrollbar 即可
.hideScrollbar::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.hideScrollbar {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+
1
2
3
4
5
6
7
2
3
4
5
6
7
# 美化滚动条
::-webkit-scrollbar {
width: 5px; /* 滚动条宽度 */
height: 10px;
}
::-webkit-scrollbar-track {
width: 6px;
background: rgba(#101f1c, 0.1);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(144, 147, 153, 0.5);
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
transition: background-color 0.3s;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(144, 147, 153, 0.3);
}
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
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