可视化定制滚动条:一次导出 WebKit + Firefox 标准两套 CSS,实时预览,一键复制,纯浏览器本地
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
整个页面 用 `*` 给页面上每个可滚动容器都加样式。单个元素 把规则限定在你自己加的一个 class 上 —— 嵌进你不完全掌控的应用里时更安全。
/* Standard properties — Firefox */
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #8b5cf6 #1e293b;
}
/* WebKit pseudo-elements — Chrome, Safari, Edge */
.custom-scrollbar::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #1e293b;
border-radius: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #8b5cf6;
border-radius: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #06e6d7;
}
.custom-scrollbar::-webkit-scrollbar-button {
display: none;
}
这个工具能做什么
一个可视化定制滚动条的编辑器,一次生成兼容所有现代浏览器的 CSS。拖动滑块 设置滚动条宽度、轨道颜色和圆角、滑块颜色、hover 颜色、滑块圆角;一键切换两端 按钮;从六套预设里挑(极光、极简、macOS 风、暗黑、霓虹、经典)。右侧面板是一个 真实可滚动的容器,实时套用你的样式,让你在发布前就能对着真实页面背景判断对比度。
滚动条样式麻烦在它分属两个世界。Chrome、Safari、Edge 用 WebKit 的 `::-webkit-scrollbar` 伪元素家族,能做到像素级控制;Firefox 完全无视这一套, 只认标准的 `scrollbar-width` 和 `scrollbar-color`。只写一套,另一半用户就退回 浏览器默认样式。这个工具永远同时导出两套,而且把标准属性放在前面,让 Firefox 读得干净。
全部在你浏览器里跑。颜色和设置不上传,分享 URL 会把你的设计编码进去,队友打开 看到的是一模一样的滚动条,localStorage 还会记住你上次的编辑。
工具细节
- 输入
- 文本 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 10 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 滚动条生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把仪表盘的滚动区域调成符合设计系统的样子
你的 SaaS 仪表盘有十几个可滚动面板,系统默认的灰色滚动条跟暗色主题 打架。选 暗黑 预设,把滑块颜色挪到你的品牌强调色,作用范围 选单个元素, 给每个面板外层加上 `class="custom-scrollbar"`。合并好的那段贴进全局 样式表一次就行。Chrome、Safari 用户拿到像素级的精修条;Firefox 用户拿到 匹配的滑块和轨道颜色。五分钟搞定,而不是凭记忆去倒推 WebKit 选择器名字。
隐藏横向卡片轮播的滚动条
一排产品卡片横向滚动,卡片下方露出的滚动条很笨拙。把宽度拉到 0 (导出就变成零尺寸的 WebKit 条加上给 Firefox 的 `scrollbar-width: none`),作用范围 选 `.custom-scrollbar`,把这个 class 加到轮播轨道上。这排 仍然能拖、能滚轮、能触控板滚动,但滚动条在所有浏览器里都消失了。这个 做法只留给装饰性条带,别用在用户必须主动滚动的内容上。
让浅色文档站里代码块的滚动条看得清
文档页里的长代码样例横向滚动,默认那条浅淡的滚动条在白底上根本看不见。 从 极简 起步,把滑块提到一个在白底上过得去的中灰,给 4px 圆角让它读起来 像个有意为之的元素,作用范围 选 `.custom-scrollbar` 加到你的 `<pre>` 外层。这里的实时预览用的是同一个深色舞台,所以把你的真实页面切到浅色, 发布前确认一下对比度。
把设计师定稿的滚动条以分享链接交付给工程
设计师在这个工具里把宽度、圆角、颜色都调到位,然后复制页面 URL。 完整配置已经编码进 query string 了。把链接丢进工单。工程师打开,看到 一模一样的滚动条,点 复制 CSS,粘贴。不用来回截图,不用追问"那个滑块 是哪个 hex 来着",也不用手动把 Figma 标注翻译成 WebKit 选择器名。
全局覆盖前先审一遍第三方组件的滚动条
在一个嵌了聊天组件或地图 SDK 的页面上贴全局 `*::-webkit-scrollbar` 规则之前,把 作用范围 切到 整个页面,读一下生成的选择器。看到那个明晃晃 的 `*` 会提醒你:这条规则也会重绘同源 iframe 内容里的滚动条,以及页面上 任何第三方组件的滚动条。如果嫌太宽,切回 class 作用范围,只针对你自己 掌控的容器。
常见踩坑
只写了 `::-webkit-scrollbar` 那套就以为完事。Firefox 完全无视它们,你的 Firefox 用户看到的是系统默认样式。永远要带上标准的 `scrollbar-width` / `scrollbar-color` 那段,这个工具帮你一起生成。
写 `scrollbar-color` 时把轨道色放在前面。标准语法是 `scrollbar-color: <滑块> <轨道>`,滑块色在前。写反了就是轨道色的滑块配滑块色的轨道,通常看起来是反的。照工具输出的顺序复制就对了。
在 `scrollbar-width` 里塞像素值。Firefox 只收 `auto`、`thin`、`none`,`scrollbar-width: 10px` 是非法的,会被静默丢弃,这个属性等于没写。像素宽度只对 WebKit 条生效;这个工具会自动把你的像素值映射到 Firefox 合法的关键字。
隐私说明
全部是浏览器标签页里跑的纯 JavaScript。CSS 在本地拼好,你的颜色、尺寸、 设置不发到任何地方,也不打点统计你设计了什么。唯一要留意的隐私点:分享 URL 会把完整的滚动条配置编码进 query string,所以你把"分享链接"粘到 Slack 或 工单里时,对方服务器的访问日志会留下这些值。它们只是颜色和像素尺寸,对滚动条 设计来说无害。只是要知道这个链接带的是配置,不是私密会话。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。