CSS 滚动条样式
滚动条样式可以通过CSS样式来控制,不同的浏览器有不同的属性。
Webkit浏览器(Chrome、Safari):
/*滚动条整体样式*/
::-webkit-scrollbar {
width: 12px;
height: 12px;
background-color: #000;
}
/*滚动条轨道样式*/
::-webkit-scrollbar-track {
background-color: #ddd;
border-radius: 6px;
}
/*滚动条滑块样式*/
::-webkit-scrollbar-thumb {
background-color: #666;
border-radius: 6px;
}
/*滚动条滑块被鼠标悬停时的样式*/
::-webkit-scrollbar-thumb:hover {
background-color: #333;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Firefox浏览器:
/*滚动条整体样式*/
scrollbar {
width: 12px;
height: 12px;
background-color: #000;
}
/*滚动条轨道样式*/
scrollbar.track {
background-color: #ddd;
border-radius: 6px;
}
/*滚动条滑块样式*/
scrollbar-thumb {
background-color: #666;
border-radius: 6px;
}
/*滚动条滑块被鼠标悬停时的样式*/
scrollbar-thumb:hover {
background-color: #333;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
IE浏览器:
/*滚动条整体样式*/
body{
scrollbar-face-color: #000;
scrollbar-shadow-color: #000;
scrollbar-highlight-color: #ddd;
scrollbar-3dlight-color: #ddd;
scrollbar-darkshadow-color: #ddd;
scrollbar-track-color:#ddd;
scrollbar-arrow-color:#666;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
以上代码只是示例,可以根据实际需要进行调整。
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13