滚动条样式生成器
像调音台一样拖动滑块调宽度、圆角、颜色，右侧预览区实时生效，自动生成兼容 Chrome / Edge / Safari（::-webkit-scrollbar）与 Firefox（scrollbar-color）的跨浏览器 CSS。
调参工作台
实时预览（可拖动滚动条）
把鼠标移进来滚动试试，这里的滚动条样式会随左侧参数即时变化。
::-webkit-scrollbar 是 Webkit/Blink 内核浏览器的私有伪元素，Chrome、Edge、Safari 全支持；Firefox 则使用标准的 scrollbar-width 与 scrollbar-color。
轨道（track）是滚动条底槽，滑块（thumb）是可拖动的部分，hover 伪类让鼠标悬停时滑块变色，交互更精致。
圆角与留白是滚动条美化的关键：给滑块加 border-radius，再配一条同色 border 制造内缩缝隙感。
隐藏滚动条但保留滚动能力：::-webkit-scrollbar { width: 0 } 配合 scrollbar-width: none。
纵向滚动条用 width 控制，横向滚动条用 height 控制，两者通常写成一致的值。
本页面生成的代码可直接粘贴进全局样式表，作用于整个站点的所有滚动条。
再滚一段——足够长的内容才能看清轨道两端的过渡效果。
色彩建议：滑块用品牌主色，轨道用主色的 10% 浅淡化，视觉最协调。
最后一段：滚动到底部时预览区会触发边界，样式依旧保持。
※ 预览仅作用于上方灰色区域；生成的代码默认作用于全站，可在选择器前加容器限定。
生成代码
/* 调整左侧参数后自动生成 */
多格式导出
同一组参数可导出为原生 CSS、SCSS / Less 变量或 Tailwind 插件，方便接入不同工程体系。
调整参数后自动生成所选格式…
滚动条结构图（自绘 SVG）
按当前宽度、圆角与配色实时绘制：轨道（track）是底槽，滑块（thumb）是拖动部分，右侧为滑块横截面。
方案管理 · 数值对比 · 导出
调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。
还没有留言，来抢沙发吧！