📜
滚动条样式生成器
自定义 webkit 滚动条的宽度、圆角、轨道与滑块颜色，生成跨浏览器 CSS。
本地处理 · 不上传
加载工具中…
相关：滚动条 · scrollbar · webkit · 样式 · css
滚动条样式生成器配置滚动条的宽度、轨道与滑块颜色和圆角，生成跨浏览器的样式代码，含 WebKit 伪元素与标准属性两套写法。
使用步骤
- 调整宽度与颜色
- 设置圆角与悬停样式
- 预览滚动效果
- 复制生成的 CSS
使用场景
- 让滚动条与深色主题协调
- 美化侧边栏与弹窗的滚动条
- 隐藏滚动条但保留滚动能力
- 统一各浏览器的滚动条观感
小贴士
- WebKit 的 ::-webkit-scrollbar 系列伪元素与标准的 scrollbar-width、scrollbar-color 属性覆盖的浏览器不同，两套都写才周全。
- 滚动条不要做得太细。低于 8 像素后鼠标很难精准拖拽，这是明显的可用性损失。
- 彻底隐藏滚动条会让用户失去「内容还有多少」的感知，除非有其他滚动提示，否则不建议。
常见问题
为什么 Firefox 不生效？
Firefox 不支持 WebKit 的伪元素写法，需要用标准的 `scrollbar-width` 和 `scrollbar-color` 属性。两套样式同时写才能覆盖所有主流浏览器。
怎么隐藏滚动条但保留滚动？
WebKit 下把 `::-webkit-scrollbar` 的宽度设为 0，Firefox 用 `scrollbar-width: none`。但要谨慎，用户会失去内容长度的视觉线索。
能改整个页面的滚动条吗？
可以，把规则写在 html 或 body 上。不过修改浏览器的主滚动条会打破用户的系统一致性预期，通常只建议在深色主题下做适配。
滚动条样式生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用滚动条样式生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。