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

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

兼容性

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

  • 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/

如果您觉得文章不错,可以请我喝一杯咖啡!