CSS 滚动条生成器
选择颜色和形状，并滚动示例框。代码把新属性与旧版 Chrome 和 Safari 的写法结合在一起。
使用方法与网站配色一致的滚动条
可用语言: 
广告
CSS 滚动条生成器: 用途
品牌色的滚动条能让网站更精致，但 CSS 已经发生变化：现在有标准属性 scrollbar-color 和 scrollbar-width，Firefox、Chrome 和 Edge 121 以及 Safari 26.2 都支持，而旧版本只认识 ::-webkit-scrollbar。
此生成器按 Chrome 文档的建议，用 @supports 把两种写法分开，因为设置了 scrollbar-color 后，Chrome 会忽略旧规则。你可以选择轨道和滑块的颜色、宽度、圆角和悬停颜色，并在示例框中测试。
使用方法
- 选择轨道和滑块的颜色。
- 调整宽度和圆角。
- 把 CSS 复制到整个页面或某个框中。
使用场景
- 品牌色的滚动条。
- 页面内带滚动的框。
- 深色主题的面板和系统。
常见问题
所有浏览器都支持吗？
标准属性 scrollbar-color 和 scrollbar-width 在 Firefox、Chrome 和 Edge 121 起以及 Safari 26.2 中可用。对于更早的版本，代码还包含 ::-webkit-scrollbar 规则，可以修改宽度、圆角和悬停颜色。
为什么代码里用了 @supports？
在 Chrome 中，一旦设置了 scrollbar-color，::-webkit-scrollbar 规则就会被忽略。@supports 只在支持的地方应用标准属性，把旧规则留给不认识标准属性的浏览器。
自定义滚动条会影响无障碍吗？
如果滚动条太细或与轨道缺乏对比，就可能有影响。请保持鼠标能够抓住的宽度，以及与背景有区别的颜色。
真的免费吗？
是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。