CSS滚动条生成器 - 自定义滚动条样式 在线工具
使用可视化控件和实时预览设计自定义CSS滚动条样式。即时生成WebKit和标准滚动条CSS代码 — 100%客户端处理，不向服务器发送任何数据。
常见问题
什么是CSS滚动条生成器？
CSS滚动条生成器是一个可视化工具，帮助您使用CSS为网站创建自定义滚动条样式。无需手动编写复杂的CSS伪元素规则，您可以通过可视化控件调整颜色、尺寸和边框属性，并即时获取可用于生产环境的CSS代码。它同时支持标准的scrollbar-color/scrollbar-width属性和WebKit特定的伪元素（如::-webkit-scrollbar）。
如何使用这个CSS滚动条生成器？
1. 选择输出模式：仅WebKit、仅标准或两者都有（推荐）。2. 使用滑块设置滚动条宽度。3. 为轨道（背景）和滑块（手柄）选择颜色。4. 可选择调整边框圆角、边框和悬停/激活状态颜色。5. 在预览面板中实时查看更改。6. 复制生成的CSS代码并粘贴到您的样式表中。
WebKit和标准滚动条CSS有什么区别？
标准属性（scrollbar-color、scrollbar-width）是官方CSS规范的一部分，适用于所有现代浏览器（Chrome 121+、Firefox 64+、Safari 26.2+、Edge 121+）。它们提供简单的颜色和宽度控制。WebKit伪元素（::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb）是非标准的，但提供对边框圆角、边框、悬停状态和各部分样式的更精细控制。重要提示：如果两者都设置了，标准属性会覆盖WebKit样式。
标准滚动条CSS属性在所有浏览器中都受支持吗？
是的。截至2025年12月，scrollbar-color和scrollbar-width已达到Baseline Newly Available状态，这意味着它们在Chrome、Firefox、Safari和Edge中均受支持。对于最详细的自定义（边框圆角、边框、悬停状态），您可能仍需要将WebKit伪元素作为增强功能包含在内。
使用此工具时我的数据安全吗？
是的。此工具完全在您的浏览器中运行。没有CSS代码、颜色值或任何其他数据会被发送到任何服务器。所有处理都在客户端进行，确保完全的隐私和安全。
可以为不同元素设置不同的滚动条样式吗？
可以。生成的CSS使用可以限定到特定元素的伪元素。您可以不全局应用样式，而是在选择器前添加类名前缀（例如，.my-container::-webkit-scrollbar），以仅对该特定元素内的滚动条进行样式设置。
如何使滚动条具有无障碍性？
在设置滚动条样式时，确保滑块与轨道之间至少具有3:1的颜色对比度（WCAG 2.0准则）。避免将滚动条做得太细（低于8px），因为这会降低触摸输入的可用性。除非您提供替代的滚动指示器，否则永远不要隐藏滚动条（scrollbar-width: none），因为这会损害依赖可见滚动条的用户的可用性。
代码示例
// Generate CSS scrollbar styles from configuration
function generateScrollbarCSS(config) {
const {
width = 12,
trackColor = '#f1f1f1',
thumbColor = '#888888',
thumbHoverColor = '#555555',
thumbBorderRadius = 6,
trackBorderRadius = 0
} = config;
// Standard CSS (all modern browsers)
const standardCSS = [
'/* Standard scrollbar properties (Chrome 121+, Firefox 64+, Safari 26.2+) */',
'.custom-scrollbar {',
` scrollbar-width: ${width <= 6 ? 'thin' : 'auto'};`,
` scrollbar-color: ${thumbColor} ${trackColor};`,
'}'
].join('\n');
// WebKit CSS (Chrome, Safari, Edge - enhanced styling)
const webkitCSS = [
'/* WebKit scrollbar styling (Chrome, Safari, Edge) */',
'.custom-scrollbar::-webkit-scrollbar {',
` width: ${width}px;`,
` height: ${width}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-track {',
` background: ${trackColor};`,
` border-radius: ${trackBorderRadius}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-thumb {',
` background: ${thumbColor};`,
` border-radius: ${thumbBorderRadius}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-thumb:hover {',
` background: ${thumbHoverColor};`,
'}'
].join('\n');
return { standardCSS, webkitCSS, combined: `${standardCSS}\n\n${webkitCSS}` };
}
// Usage
const css = generateScrollbarCSS({
width: 10,
trackColor: '#f0f0f0',
thumbColor: '#6366f1',
thumbHoverColor: '#4f46e5',
thumbBorderRadius: 5,
trackBorderRadius: 5
});
console.log(css.combined);