企业站统一风格
前端开发在给公司官网做改版，设计稿里滚动条是细圆角金属灰，但 Chrome 默认是方形粗蓝条。用本工具一次性生成 Webkit 和 Firefox 两套 CSS，分别贴在全局样式文件里，不用写两套 -webkit-scrollbar 和 scrollbar-width 的兼容 hack，避免因漏写某个伪元素导致部门页面滚动条样式崩坏。
尺 寸Size · WebKit width/height
宽度 width
10px
留白 thumb padding · 透明 border
2px
Firefox 宽度 scrollbar-width
轨 道Track
颜色 track
圆角 radius
0px
滑 块Thumb
颜色 thumb
悬停色 thumb:hover
圆角 radius
6px
预 设Gallery · 极简 / 圆润 / 暗色 / 赤金 / macOS
live preview
滚 动 条 实 时 预 览
这是一个真实可滚动的示例框，应用了你当前自定义的滚动条样式。上下滚动即可查看效果。
← 横向溢出内容 · 切「横 + 纵」可见水平滚动条 · scroll me horizontally → Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.
春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
设 计 要 点
① 不要彻底隐藏滚动条，用户需要找到滚动入口；② 颜色对比度足够，让人看见滑块位置；③ 悬停反馈提示可拖拽；④ 移动端通常用系统 overlay 条。
滚动条是页面里细小却高频触达的元素，精致的滚动条能强化品牌识别。
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
跨 浏 览 器
WebKit / Blink（Chrome · Edge · Safari · Opera）走 ::-webkit-scrollbar 伪元素；Firefox 用标准属性 scrollbar-width 与 scrollbar-color。
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
更多内容用于撑高滚动 · 更多内容 · 更多内容 · 更多内容 · 更多内容 · 滚到底部看轨道与滑块。
结尾。一切处理均在你的浏览器本地完成，无任何上传。
差异提示：Firefox 仅支持
scrollbar-width(auto/thin/none) 与 scrollbar-color，不支持精确像素宽度、轨道/滑块圆角、留白与上下按钮；WebKit 内核可精细到这些。两套规则可共存，浏览器各取所需。就绪 · 注入作用域规则实时预览 · 全程浏览器本地处理
第一节
关于本工具
About在 Chrome 里调好的滚动条，切到 Firefox 发现变回了系统默认的灰条——webkit 和 firefox 两套伪元素规则互不兼容。这个工具把两种内核的 CSS 属性拆成独立面板，分别生成 -webkit-scrollbar 和 scrollbar-width / scrollbar-color 两套代码。预览区同时渲染两个浏览器的最终效果，不用反复切窗口调试。纯前端处理，代码片段不上传服务器。
使用场景
文档站点暗黑模式
技术博客的阅读区启用了暗黑模式，但浏览器默认滚动条仍是亮白色，在深色背景上像一道刺眼的裂缝。用本工具把滚动条滑块调成 #333、轨道调成 #1a1a1a，并设置 scrollbar-color 让 Firefox 也同步变色。不用手动查 MDN 文档里 -webkit-scrollbar-thumb 的 15 个属性，直接复制生成的代码段。
后台管理窄表格
ERP 系统的订单列表有 12 列，横向滚动时默认滚动条占 17px 高度，吃掉表格最后一行数据。用本工具把滚动条高度压到 6px，滑块半透明，鼠标悬停才变实色。这样表格底部能多显示一行订单，财务对账时不用频繁上下滚动。
移动端 H5 页面
微信内嵌页的滚动条在 iOS Safari 上默认隐藏，但部分安卓 WebView 会显示粗条，破坏页面整体圆角卡片设计。用本工具设置 scrollbar-width: thin，并给 -webkit-scrollbar 设透明轨道，让安卓端也像 iOS 一样不干扰布局，同时保留触摸滚动的手感。
在线简历编辑器
用户在编辑个人简历时，右侧预览区内容超长，默认滚动条样式与简历的极简风格冲突。用本工具把滚动条改成 4px 宽的浅灰色圆点，只在鼠标进入预览区时显示。避免了在 React 组件里手动管理 onMouseEnter/onMouseLeave 来控制滚动条显隐的复杂逻辑。
第二节
使用指南
Getting Started使用步骤
- 1在左侧代码编辑区粘贴或输入 CSS 样式（如 ::-webkit-scrollbar 规则），右侧预览区实时渲染效果
- 2点击「Firefox」标签切换预览模式，验证样式在 Firefox 下的兼容表现（需使用 scrollbar-width / scrollbar-color 属性）
- 3调整颜色、宽度或圆角参数后，预览区自动更新，无需手动刷新
- 4点击「复制代码」按钮，生成的完整 CSS 代码自动存入剪贴板，可直接粘贴到项目样式表中
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } | /* 在 Chrome/Safari 中生效，Firefox 不识别 */ /* 需额外添加 Firefox 兼容写法：scrollbar-width: thin; scrollbar-color: #888 transparent; */ | 常规：纯 WebKit 写法，展示工具自动检测并提示 Firefox 兼容缺失的能力 |
| scrollbar-width: thin; scrollbar-color: #c00 #f5f5f5; | /* Firefox 标准写法，Chrome/Safari 不识别 */ /* 需额外添加 WebKit 兼容写法：::-webkit-scrollbar { width: 6px; } ... */ | 常规：纯 Firefox 写法，验证工具对 Firefox 属性的识别与兼容提示 |
| ::-webkit-scrollbar { width: 0px; } ::-webkit-scrollbar-thumb { background: transparent; } | /* 隐藏滚动条（Chrome/Safari） */ /* Firefox 需添加：scrollbar-width: none; */ /* 注意：完全隐藏滚动条可能影响可访问性，用户无法通过滚动条拖动 */ | 边界：隐藏滚动条场景，验证工具是否给出可访问性提醒 |
| ::-webkit-scrollbar-track { background: linear-gradient(180deg, #f00, #00f); } | /* 轨道渐变背景在 Chrome/Safari 中生效 */ /* Firefox 不支持轨道渐变，scrollbar-color 只能设置纯色 */ /* 建议：仅在 WebKit 浏览器保留渐变，Firefox 回退为纯色 */ | 边界：渐变背景在 Firefox 中不可用，验证工具对属性兼容性的精确判断 |
| ::-webkit-scrollbar-button { display: block; height: 20px; background: #ccc; } | /* 滚动条按钮（上下箭头区域）在 Chrome/Safari 中可自定义 */ /* Firefox 不支持 ::-webkit-scrollbar-button，需用其他方式模拟 */ /* 注意：部分旧版 Chrome 已废弃此伪元素，可能无效 */ | 边界：废弃伪元素检测，验证工具是否提示浏览器版本兼容风险 |
| scrollbar-width: auto; scrollbar-color: auto; | /* 恢复浏览器默认滚动条样式 */ /* 在 Firefox 中有效，Chrome/Safari 需重置 ::-webkit-scrollbar 相关属性 */ /* 建议：同时设置 ::-webkit-scrollbar { width: auto; } 以彻底恢复 */ | 易错：用户误以为 auto 能一键恢复所有浏览器，实际需分别处理 |
| ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-thumb { background: #333; border: 2px solid #fff; } | /* 滚动条滑块带边框（Chrome/Safari） */ /* Firefox 中 scrollbar-color 不支持边框，滑块边缘会紧贴轨道 */ /* 视觉差异：Chrome 滑块有 2px 白色内边距，Firefox 无 */ | 易错：边框效果在 Firefox 中无法实现，验证工具是否指出视觉差异 |
常见错误对照
1.只写 webkit 伪元素，忽略 Firefox 前缀
✗ 错误
::-webkit-scrollbar { width: 8px; }✓ 修复
/* 同时写 Firefox 前缀 */
* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; }Firefox 不支持 ::-webkit-scrollbar，必须用 scrollbar-width / scrollbar-color 属性才能兼容。
2.scrollbar-width 值拼写错误
✗ 错误
* { scrollbar-width: thin; } 写成 scrollbar-width: thiner;✓ 修复
* { scrollbar-width: thin; }scrollbar-width 只接受 auto / thin / none 三个关键字，thiner 不是合法值，会被浏览器忽略。
3.Firefox 下 scrollbar-color 只写一个颜色
✗ 错误
* { scrollbar-color: #f00; }✓ 修复
* { scrollbar-color: #f00 #ccc; }scrollbar-color 必须同时指定滑块色和轨道色（两个值），只写一个会被当作无效声明。
4.webkit 伪元素选择器遗漏双冒号
✗ 错误
-webkit-scrollbar { width: 8px; }✓ 修复
::-webkit-scrollbar { width: 8px; }::-webkit-scrollbar 是伪元素，必须用双冒号 :: 开头，单冒号是旧语法且部分浏览器已废弃。
5.试图用 border-radius 圆角滚动条但没设置轨道背景
✗ 错误
::-webkit-scrollbar-thumb { border-radius: 4px; }✓ 修复
::-webkit-scrollbar-track { background: #eee; }
::-webkit-scrollbar-thumb { border-radius: 4px; background: #888; }thumb 的 border-radius 只在有可见轨道背景时生效；轨道透明时圆角效果不可见。
6.Firefox 下用 border-radius 无效
✗ 错误
* { scrollbar-width: thin; scrollbar-color: #888 #eee; border-radius: 4px; }✓ 修复
Firefox 无法对滚动条滑块单独设置圆角，只能接受纯色矩形滑块。scrollbar-color 在 Firefox 中只支持纯色填充，不支持 border-radius 或渐变，这是浏览器引擎限制。
7.给 body 设置滚动条样式但页面滚动容器是 div
✗ 错误
body::-webkit-scrollbar { width: 8px; }✓ 修复
.scroll-container::-webkit-scrollbar { width: 8px; }滚动条样式只作用于选择器匹配的元素。如果实际滚动发生在某个 div 上，body 的样式不会生效。
8.webkit 伪元素选择器拼写错误（少写 hyphen）
✗ 错误
::-webkit scrollbar-thumb { background: #888; }✓ 修复
::-webkit-scrollbar-thumb { background: #888; }webkit 伪元素是 ::-webkit-scrollbar，中间有连字符，空格会导致选择器失效。
第三节
工作原理
How It Works核心公式
scrollbar-width: thin | auto | none
变量说明
thin滚动条宽度设为细窄样式auto浏览器默认滚动条宽度none隐藏滚动条但可滚动
示例
Firefox 浏览器中设置 scrollbar-width: thin，滚动条宽度从默认 17px 缩减至约 6px，节省横向空间且保留滚动功能。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问这个滚动条样式工具生成的代码能直接用在火狐浏览器上吗？＋
答
可以，但要注意写法差异。本工具同时生成 Webkit（Chrome/Safari/Edge）和 Firefox 两套 CSS。Firefox 使用 `scrollbar-width` 和 `scrollbar-color` 属性，不支持 `::-webkit-scrollbar` 伪元素。复制代码时，工具会在结果区分别标注两套代码块，直接拷贝对应浏览器的代码段即可，不要混用。实测 Firefox 91+ 均兼容。
问为什么我粘贴了代码，滚动条颜色没变？＋
答
最常见原因是 CSS 选择器优先级不够。本工具生成的代码默认作用于 `body` 或 `::-webkit-scrollbar` 全局选择器。如果页面其他样式（如第三方 UI 库）给滚动条容器设置了 `overflow` 或自定义样式，需要把工具生成的代码选择器改为容器类名（如 `.my-scroll-box::-webkit-scrollbar`）。另外检查是否误复制了 Firefox 代码到 Chrome 里（Firefox 属性在 Chrome 会被忽略）。
问能不能只改滚动条颜色，不改宽度？＋
答
可以。工具界面里「宽度」和「颜色」是独立配置项。如果想保留浏览器默认宽度，把宽度滑块拖到「不设置」或输入 0 即可（工具会跳过 `scrollbar-width` 和 `width` 属性）。这样生成的 CSS 只包含颜色相关代码，宽度由浏览器默认值决定。注意 Firefox 默认宽度是 12px，Chrome 是 6-8px，不设宽度时两者表现会不一样。
问生成的代码里怎么有两个滚动条轨道颜色？＋
答
因为 Webkit 内核区分「轨道背景」和「滑块轨道」两层。工具默认把 `track`（轨道背景）和 `thumb`（滑块）分开设置。如果你只看到一个颜色，可能是两个值设成了一样。检查生成的 CSS 里 `::-webkit-scrollbar-track` 和 `::-webkit-scrollbar-thumb` 两段，分别对应滑轨底图和可拖动的滑块。建议把轨道颜色设得比滑块浅 20%-30%，视觉层次更清晰。
问这个工具会上传我的页面代码吗？＋
答
不会。实现方式是纯前端 FE，所有 CSS 生成逻辑在浏览器本地运行，代码不经过任何后端服务器。关闭页面后数据即消失。隐私方面可以放心，即使粘贴了完整页面 HTML 也不会被上传或记录。如果仍担心，可以断网后使用——工具在离线状态下照样生成代码。
问生成的滚动条样式在手机浏览器上有效吗？＋
答
大部分无效。移动端浏览器（包括 Chrome for Android 和 Safari iOS）默认不显示滚动条，或者使用系统级原生滚动条，无法通过 CSS 自定义。本工具生成的代码主要面向桌面端 Web 应用。如果需要在移动端自定义滚动条，建议用 JavaScript 库（如 OverlayScrollbars）模拟。工具页面底部有相关提示，但核心代码仅适配桌面端。
问为什么我设了圆角但滚动条看起来还是方的？＋
答
圆角需要同时设置在滑块和轨道上。工具默认只给滑块（`thumb`）设圆角，轨道（`track`）是直角。如果轨道本身是方角，滑块圆角再大也显示不出来。检查生成的 CSS 中 `::-webkit-scrollbar-track` 是否也加了 `border-radius`。建议轨道圆角设为滑块圆角的一半（例如 thumb 圆角 10px，track 圆角 5px），视觉上更自然。
问这个工具和那些在线 CSS 生成器比有什么不同？＋
答
主要差异在两点：一是同时输出 Webkit 和 Firefox 两套代码，多数生成器只做 Chrome 端；二是实时预览区直接模拟了两种浏览器的滚动条效果，不用来回切换浏览器测试。另外工具支持导出压缩版（minified）代码，适合直接放进生产环境。如果你只需要 Chrome 样式，其他工具可能更轻量；但要做跨浏览器统一风格，本工具更省事。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。