基本语法

在CSS中，可以使用 ::-webkit-scrollbar 和相关伪元素来为滚动条设置样式，但请注意这些伪元素是非标准的，主要用于WebKit内核浏览器（如Chrome、Safari）。
::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式，如果没有设置 overflow:scroll;，元素的滚动条将不会显示。

相关伪元素

1. ::-webkit-scrollbar——整个滚动条。
2. ::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
3. ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
4. ::-webkit-scrollbar-track——滚动条轨道。
5. ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
6. ::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
7. ::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。

对于Firefox等其他浏览器，可以使用标准的CSS滚动条样式属性。

scrollbar-color

scrollbar-width

用法案例

/* 自定义整个滚动条 */
::-webkit-scrollbar {
    width: 12px; /* 设置滚动条的宽度 */
}
 
/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* 设置轨道的背景颜色 */
}
 
/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
    background: #888; /* 设置滑块的背景颜色 */
}
 
/* 当hover或active状态时，自定义滑块的颜色 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

对于Firefox，可以使用以下属性：

/* 对于Firefox，自定义整个滚动条 */
* {
    scrollbar-width: thin; /* 可以是 'auto', 'thin', 'none' */
    scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}