如何 - 自定义滚动条

了解如何使用 CSS 创建自定义滚动条。

自定义滚动条

亲自试一试 »

笔记：Firefox 或 Edge 79 之前的版本不支持自定义滚动条。

如何创建自定义滚动条

Chrome、Edge、Safari 和 Opera 支持非标准::-webkit-scrollbar伪元素，它允许我们修改浏览器滚动条的外观。

以下示例创建一个细的（10 像素宽）滚动条，它具有灰色的轨道/条颜色和深灰色（#888）手柄：

示例

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

亲自试一试 »

此示例创建一个带有框阴影的滚动条：

示例

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-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出现在某些元素底角的可拖动调整大小手柄。