如何做 - 自定义滚动条
了解如何使用 CSS 创建自定义滚动条。
自定义滚动条
注意： Firefox 或 79 版本之前的 Edge 不支持自定义滚动条。
如何创建自定义滚动条
Chrome、Edge、Safari 和 Opera 支持非标准的 ::-webkit-scrollbar 伪元素，它允许我们修改浏览器滚动条的外观。
以下示例创建了一个细的（10px 宽）滚动条，其轨道/条颜色为灰色，滑块颜色为深灰色（#888）
示例
/* 宽度 */
::-webkit-scrollbar {
width: 10px;
}
/* 轨道 */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* 滑块 */
::-webkit-scrollbar-thumb {
background: #888;
}
/* 悬停时的滑块 */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
自己动手试一试 »
此示例创建了一个带盒阴影的滚动条
示例
/* 宽度 */
::-webkit-scrollbar {
width: 20px;
}
/* 轨道 */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* 滑块 */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
自己动手试一试 »
滚动条选择器
对于 webkit 浏览器，您可以使用以下伪元素来自定义浏览器的滚动条
::-webkit-scrollbar— 滚动条本身。::-webkit-scrollbar-button— 滚动条上的按钮（指向上和下的箭头）。::-webkit-scrollbar-thumb— 可拖动的滚动滑块。::-webkit-scrollbar-track— 滚动条的轨道（进度条）。::-webkit-scrollbar-track-piece— 未被滑块覆盖的轨道（进度条）部分。::-webkit-scrollbar-corner— 滚动条的底角，水平和垂直滚动条交汇处。::-webkit-resizer— 出现在某些元素底角的可拖动调整大小的句柄。
