滚动条生成器
可视化定制 webkit 滚动条：尺寸、轨道、滑块、悬停态与圆角，复制带 Firefox 回退的 CSS。
尺寸
颜色
形状
实时预览（在框内滚动）
下面的框同时带竖向与横向滚动条，样式规则与生成的 CSS 片段一致。
Scroll down for the vertical bar, scroll right for the horizontal one. Every paragraph here only exists to give the box something to scroll.
Line two of filler content. Line three of filler content. Line four of filler content.
Line five of filler content. Line six of filler content. Line seven of filler content.
Line eight of filler content. Line nine of filler content. Line ten of filler content.
Line eleven of filler content. Line twelve of filler content. Line thirteen of filler content.
Line fourteen of filler content. Line fifteen of filler content. Line sixteen of filler content.
生成的 CSS
::-webkit-scrollbar 系列覆盖 Chrome、Edge、Safari 与 Opera。Firefox 不支持伪元素样式滚动条，因此片段同时写入标准属性 scrollbar-width 与 scrollbar-color。
如何使用
- 分别设置竖条的宽度与横条的高度。两者写在同一条
::-webkit-scrollbar规则里。 - 选轨道颜色（凹槽）与滑块颜色（拖动的把手），再单独给滑块悬停配一个反馈色。
- 调整滑块圆角与轨道圆角；想要把手周围露出一圈轨道色的留白，就加滑块边框。
- 在标准属性
scrollbar-width里决定 Firefox 的表现：auto、thin或none。 - 在预览框里滚动，两条滚动条实时生效，然后复制 CSS。片段默认用
.scroll-area类名，改成你标记里的类名即可。
常见用途
- 侧边栏与聊天面板 —— 细长的主题滚动条，不再露系统默认样式。
- 代码与日志查看器 —— 宽轨道加高对比滑块，密集文本里也找得到滚动位置。
- 深色主题 —— 轨道与滑块一起换深色，刺眼的系统亮条不再扎眼。
- 嵌入组件 —— 容器内的滚动区域，系统滚动条摆进去显得违和。
为何保证隐私
所有取值都在本地生效，CSS 在页面内拼装。预览样式注入独立的作用域样式元素，不发起任何请求，配置也不会外发。
常见问题
问：为什么有两段 CSS？
答：Chrome、Edge、Safari、Opera 通过 ::-webkit-scrollbar 伪元素定制滚动条，而 Firefox 只支持标准属性 scrollbar-width 与 scrollbar-color。片段同时覆盖两者，不支持时也能优雅降级。
问：手机上悬停色没反应？
答：触摸界面没有悬停状态，:hover 规则只在指针设备上生效。触屏用户看到的是基础滑块颜色。
问：能彻底隐藏滚动条吗？
答：Firefox 里把 scrollbar-width 设为 none 即可隐藏；Chromium 里可给伪元素设 display: none。但只有在存在其他滚动提示手段时才该这么做，否则用户会丢失位置感。
问：预览为什么两个方向都能滚？ 答：预览框被刻意做得比内容又窄又矮，竖横两条滚动条都会渲染，圆角、边框与颜色可以分别核对。
你的数据留在这台设备上
滚动条生成器 完全在本地运行。你粘贴或拖入的一切都由你自己的浏览器处理，不会被传走。我们的服务器不保存任何东西——关掉标签页就没了。
你输入的内容不会发往服务器、不被记录，也不用于分析统计。首次加载之后即使断网，这个页面照样能用。