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

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

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

以上代码只是示例，可以根据实际需要进行调整。

#CSS

上次更新: 2024/01/30, 00:35:17

← CodeMirror代码编辑器实现自定义提示功能增强版（支持搜索、调用接口查询提示内容） d3 svg 基本图形绘制→