分类: 开发工具
CSS 滚动条生成器
在本地生成自定义滚动条 CSS，并实时预览
带实时预览地设计自定义滚动条，并复制 scrollbar-color、scrollbar-width 以及 WebKit 滚动条样式的 CSS。全部在浏览器里生成。
预览
输出
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
scrollbar-color: #8a9a8f #eceee9;
scrollbar-width: thin;
}
/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #eceee9;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #8a9a8f;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #6f8076;
}
scrollbar-color 和 scrollbar-width 是标准属性，也是 Firefox 与当前版本 Chrome 所采用的。::-webkit- 规则是为旧版 Chrome、Edge 和 Safari 保留的非标准前缀——两个引擎的渲染结果不会完全一致。
预览和生成的 CSS 都在你的浏览器里产生。
本页的所有处理都在浏览器中完成，不会上传任何内容。
这个工具能做什么
滚动条的样式被分在两套机制里。CSS Scrollbars Styling 模块提供 `scrollbar-color` 和 `scrollbar-width`：两个属性、包含 Firefox 在内的广泛支持，以及有意克制的控制力。更早的 `::-webkit-scrollbar` 伪元素能做的多得多，但它是非标准前缀。这个生成器先输出标准属性，再输出带说明的 WebKit 区块，这样既能覆盖得广，又不会假装二者是同一回事。它们的渲染不会一致；而滚动条是人们真正依赖的控件，所以这里的预览是真能滚动的，而不是画一个给你看。
使用方法
- 设置要美化的元素选择器，然后选好滑块、轨道和悬停时的颜色。
- 选择 scrollbar-width，并设置 WebKit 的宽度和圆角。
- 滚动预览确认效果，然后复制 CSS。
隐私说明
本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。
常见问题
- 自定义滚动条在所有浏览器里都能用吗？
- 不会完全一致。scrollbar-color 和 scrollbar-width 在 Firefox 以及当前版本的 Chrome、Edge 中有效；::-webkit- 规则覆盖旧版 Chrome、Edge 和 Safari。工具会同时输出两者，但两个引擎绘制滚动条的方式不同，没有哪段 CSS 能让它们完全一样。
- scrollbar-color 是什么？
- 它是用一条声明同时设置滑块和轨道颜色的标准属性——先写滑块，再写轨道。它属于 CSS Scrollbars Styling 模块，所以应当以它为主。
- 为什么还要包含 WebKit 的 CSS？
- 因为标准属性只开放了颜色和一个粗略的宽度，而且旧版 WebKit 和 Blink 并不支持它们。带前缀的规则补上了明确的尺寸和圆角，也照顾到那些浏览器。
- 我应该把滚动条完全隐藏吗？
- 请谨慎。scrollbar-width: none 会拿掉一个可见提示——它告诉人们这块区域可以滚动，也让人能拖动它。对不用滚轮或触控板的人来说这是损失。不妨改用一条细而对比清晰的滚动条。