css 自定义浏览器滚动条样式(firefox,chrome,safari)

时间：

分类：

css

字数：

807 字

时长：

大约需要 3 分钟

次数：

0 人阅读

脑洞打开的世界，希望万物都可随心自定义，浏览器滚动条也不例外。

兼容性

这种稀奇古怪的玩意儿，肯定都有兼容性问题。

  • IE：仅支持调整颜色，不支持大小修改。

大概可以修改以下这些颜色，不支持rgba，只能使用十六进制色值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*三角箭头的颜色*/
scrollbar-arrow-color: #fff;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0099dd;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0099dd;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0066ff;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color: #0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0099dd;
  • Firefox：64+版本支持标准修改方式，低版本不支持，MDN文档。
1
2
scrollbar-color: rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.25);
scrollbar-width: thin;
  • chrome/safari (webkit内核): 支持各个部件的自定义。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 整个滚动条 */
::-webkit-scrollbar {}
/* 滚动条上的按钮 (上下箭头) */
::-webkit-scrollbar-button {}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {}
/* 滚动条轨道 */
::-webkit-scrollbar-track {}
/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {}
/* 某些元素的corner部分的部分样式(例:textarea的可拖动按钮) */
::-webkit-resizer {}

完整代码

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
.scrollbar {
  overflow: auto;
  /* for Firefox: */
  scrollbar-color: rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.25);
  scrollbar-width: thin;
  /* for IE */
  /*三角箭头的颜色*/
  scrollbar-arrow-color: #fff;
  /*滚动条滑块按钮的颜色*/
  scrollbar-face-color: #4c4c4c;
  /*滚动条整体颜色*/
  scrollbar-highlight-color: #4c4c4c;
  /*滚动条阴影*/
  scrollbar-shadow-color: #4c4c4c;
  /*滚动条轨道颜色*/
  scrollbar-track-color: #bfbfbf;
  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
  scrollbar-3dlight-color: #4c4c4c;
  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
  scrollbar-darkshadow-color: #4c4c4c;
  /*滚动条基准颜色*/
  scrollbar-base-color: #4c4c4c;
}
/* for chrome safari */
/* 滚动条大小 */
.scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
/*定义滚动条轨道 内阴影+圆角*/
.scrollbar::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.25);
}
/*定义滑块 内阴影+圆角*/
.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.6);
}

示例效果

11111

22222

33333

44444

55555

66666

77777

88888

99999

以上效果基本能满足简单的修改浏览器滚动条样式，但是不能做到样式统一，如果要完全做到每个浏览器统一样式，还是需要借助 js 插件来完成。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-10-13/css-scrollbar/

如果您觉得文章不错，可以点击文章中的广告支持一下！