【CSS】设置滚动条样式
文章目录
- 基本语法
- 用法案例
基本语法
在CSS中，可以使用 ::-webkit-scrollbar 和相关伪元素来为滚动条设置样式，但请注意这些伪元素是非标准的，主要用于WebKit内核浏览器（如Chrome、Safari）。
::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式，如果没有设置 overflow:scroll;，元素的滚动条将不会显示。
相关伪元素
::-webkit-scrollbar——整个滚动条。::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。::-webkit-scrollbar-thumb——滚动条上的滚动滑块。::-webkit-scrollbar-track——滚动条轨道。::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。::-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; /* 滑块颜色 轨道颜色 */
}