CSS滚动条样式生成器
生成跨浏览器自定义滚动条CSS — WebKit的::-webkit-scrollbar-*规则加上Firefox的scrollbar-color/scrollbar-width — 通过宽度、轨道、滑块和角落设置，包含真实的可滚动实时预览。
输入
宽度
颜色
仅在垂直和水平滚动条交汇处可见。
形状和标记
用轨道颜色的圆环将滑块与轨道分开，使其看起来像浮动。
将此类应用于任何具有overflow的元素 — 每个选择器都在其范围内。
输出
Your scrollbar will appear here.
实际生成的CSS，隔离在Shadow DOM中 — 滚动框查看。
应用了类的可滚动框 — 用您自己的内容替换高度/内容。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-scrollbar-style-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"widthPreset": "thin",
"customWidth": "12",
"trackColor": "#f1f5f9",
"thumbColor": "#94a3b8",
"thumbHoverColor": "#64748b",
"cornerColor": "#f1f5f9",
"trackRadius": "8",
"thumbRadius": "8",
"floatingThumb": "true",
"className": "io-scrollbar"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-scrollbar-style-generator` tool (CSS Scrollbar Style Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-scrollbar-style-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS滚动条样式生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
此工具的功能
浏览器对如何设置滚动条样式的看法不一致。Chrome、Safari和Edge使用一组::-webkit-scrollbar-*伪元素；Firefox忽略所有这些，而是读取两个简写属性scrollbar-width和scrollbar-color。此工具从多个控件 — 宽度、轨道颜色、滑块颜色、悬停颜色、角落颜色和角落半径 — 同时生成两者，并显示一个真实的可滚动实时预览，这样你可以在复制任何内容之前看到结果。
如何使用
- 选择滚动条宽度 — 细、自动(重新着色的浏览器默认宽度)、自定义像素值或隐藏。
- 设置轨道、滑块、滑块悬停和角落颜色。
- 调整轨道圆角和滑块圆角，并切换浮动滑块以使滑块与轨道分开。
- 给它一个类名，然后滚动实时预览进行检查。
- 将CSS复制到你的样式表中，并将类名应用于任何具有
overflow: auto或overflow: scroll的元素。
CSS为什么需要WebKit块和Firefox块？
目前还没有单一的标准滚动条样式API。基于WebKit的浏览器将滚动条公开为五个可设置样式的伪元素(::-webkit-scrollbar、-track、-thumb、-thumb:hover、-corner)；Firefox实现了更新的、更简单的scrollbar-width/scrollbar-color属性，完全不支持WebKit伪元素。仅使用一半会让整个浏览器引擎保持未设置样式的默认滚动条，因此生成的CSS总是包含两者。
Firefox为什么不能使用我的自定义像素宽度？
scrollbar-width只接受三个关键字 — auto、thin、none — 没有精确像素值的属性。当你选择自定义宽度时，Firefox会回退到thin，这是最接近的可用选项。
这会影响我页面上其他地方的滚动条吗？
不会。每个规则的范围都限制在你选择的类名下，因此只有应用了该类的元素会受到影响 — 页面的其余部分保持其原生滚动条。
如果我想完全隐藏滚动条怎么办？
选择隐藏宽度预设。它为Firefox设置scrollbar-width: none，为WebKit滚动条伪元素设置display: none，因此元素仍然可以滚动(使用鼠标滚轮、触摸或脚本)，但不显示任何滚动条轨道或滑块。
如果我需要完全不同的滚动效果怎么办？
对于滚动驱动的动画而不是滚动条外观，请参阅CSS滚动驱动动画生成器。要圆角可滚动框本身而不是其滚动条，请使用CSS边框半径生成器。