CSS自定义浏览器滚动条样式

827次阅读

共计 789 个字符，预计需要花费 2 分钟才能阅读完成。

提醒：本文最后更新于 2025-07-31 22:45，文中所关联的信息可能已发生改变，请知悉！

## 自定义滚动条样式

大家在用 PC 端浏览我的站点的时候可能发现了右边的滚动条有点不一样。

这是参考了 Puock 主题开发大佬的一篇文章，决定在这里把代码贴出来供大家参考。

> ** 这是具体 CSS**

“`css
::-webkit-scrollbar /* 滚动条整体部分，其中的属性有 width,height,background,border（就和一个块级元素一样）等。*/
::-webkit-scrollbar-button /* 滚动条两端的按钮。可以用 display:none 让其不显示，也可以添加背景图片，颜色改变显示效果。*/
::-webkit-scrollbar-track /* 外层轨道。可以用 display:none 让其不显示，也可以添加背景图片，颜色改变显示效果。*/
::-webkit-scrollbar-track-piece /* 内层轨道，滚动条中间部分（除去）。*/
::-webkit-scrollbar-thumb /* 滚动条里面可以拖动的那部分 */
::-webkit-scrollbar-corner /* 边角 */
::-webkit-resizer /* 定义右下角拖动块的样式 */
“`

> ** 这是我的效果 **

“`css
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-track {
background: #009900;
}
::-webkit-scrollbar-thumb {
background: #00FF99;
border-radius: 4px;
}
::-webkit-scrollbar-corner {
background: #82AFFF;
}
::-webkit-scrollbar-resizer {
background: #006600;
}
“`