【CSS】设置滚动条样式

基本语法

在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

值	描述
auto	在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分的默认平台渲染。
<color> <color>	将第一种颜色应用于滚动条滑块，第二种颜色应用于滚动条轨道。

scrollbar-width

值	描述
auto	系统默认的滚动条宽度。
thin	系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度。
none	不显示滚动条，但是该元素依然可以滚动。

用法案例

/* 自定义整个滚动条 */
::-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; /* 滑块颜色 轨道颜色 */
}