自定义 CSS 滚动条生成器

把默认的灰色滚动条换成与您网站风格一致的版本:调整宽度、颜色和圆角,实时预览,然后复制可直接使用的 CSS 代码。所有内容都在您的浏览器本地计算。

示例:

宽度:10px

圆角:8px

轨道颜色

滑块颜色

悬停颜色

第 1 行滚动内容 — 滚动即可查看滚动条。

第 2 行滚动内容 — 滚动即可查看滚动条。

第 3 行滚动内容 — 滚动即可查看滚动条。

第 4 行滚动内容 — 滚动即可查看滚动条。

第 5 行滚动内容 — 滚动即可查看滚动条。

第 6 行滚动内容 — 滚动即可查看滚动条。

第 7 行滚动内容 — 滚动即可查看滚动条。

第 8 行滚动内容 — 滚动即可查看滚动条。

第 9 行滚动内容 — 滚动即可查看滚动条。

第 10 行滚动内容 — 滚动即可查看滚动条。

第 11 行滚动内容 — 滚动即可查看滚动条。

第 12 行滚动内容 — 滚动即可查看滚动条。

预览使用 ::-webkit-scrollbar(Chrome、Edge、Safari)和 scrollbar-color(Firefox)属性;实际效果可能因您的浏览器而略有不同。

CSS 代码

.byteryo-custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #8b5cf6 #1e1e2e;
}

.byteryo-custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-track {
  background: #1e1e2e;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a78bfa;
}

工作原理

目前并没有一个统一的标准 CSS 属性来设置滚动条样式:基于 Chromium 的浏览器(Chrome、Edge、Safari)使用伪元素 ::-webkit-scrollbar,而 Firefox 则使用 scrollbar-width 和 scrollbar-color 属性。该工具会同时生成两种写法,并限定在某个类名的作用范围内,使效果只作用于您指定的容器,而不是整个页面。

如何把这段代码应用到我自己的容器上?

复制生成的 CSS,按照您的命名规范重命名类名 byteryo-custom-scrollbar,然后把这个类添加到要自定义滚动条的 HTML 元素上(例如设置了 overflow: auto 或 overflow: scroll 的 div)。

所有浏览器中的效果都一样吗?

不一样:Firefox 只支持通过 scrollbar-color 设置宽度(细或自动)和颜色,不支持圆角,也无法单独设置悬停颜色,而基于 Chromium 的浏览器可以进行更精细的控制。生成的代码会在每种内核上尽可能呈现最佳效果,但不同浏览器之间存在轻微的视觉差异属于正常现象。

CSS 代码完全在您的浏览器中生成:生成过程中不会向任何服务器发送数据。