如何 - 自定义滚动条
了解如何使用 CSS 创建自定义滚动条。
自定义滚动条
注意： Firefox 或 Edge（79 之前的版本）不支持自定义滚动条。
如何创建自定义滚动条
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出现在某些元素底部角的可拖动调整大小手柄。
