如何创建自定义滚动条

❮ 如何使用 CSS 创建浏览器窗口

如何使用 CSS 隐藏滚动条 ❯

如何创建 - 自定义滚动条

更新于 2024/8/20 3:45:00

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

自定义滚动条

亲自试一试 »

亲自试一试 »

注释: Firefox 或 Edge 79 之前的版本不支持自定义滚动条。

如何创建自定义滚动条

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

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

实例

/* 宽度 */

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

/* 跟踪 */

::-webkit-scrollbar-track { background: #f1f1f1; }

/* 句柄 */

::-webkit-scrollbar-thumb { background: #888; }

/* 悬停处理 */

::-webkit-scrollbar-thumb:hover {

background: #555; }

亲自试一试 »

这个例子创建了一个带有盒子阴影的滚动条:

实例

/* width */

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

❮ 如何使用 CSS 创建浏览器窗口

如何使用 CSS 隐藏滚动条 ❯