CSS滚动条生成器

现代标准属性（2023年及以后）

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

浏览器支持（2024年）：

• scrollbar-width：Chrome 121+、Safari 18.2+、Firefox 64+。
• scrollbar-color：Chrome 121+、Safari 18.2+、Firefox 64+。
• scrollbar-gutter: stable：Chrome 94+、Safari 14+、Firefox 97+。即使不需要滚动条，也会为其预留空间，防止布局偏移。

webkit伪元素（Chrome、Safari、旧版Edge）

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

更精细的控制。width设置垂直滚动条的宽度；height设置水平滚动条的高度。对于可双向滚动的容器，请同时添加这两者。

层叠两种方案

先指定现代规则，再将webkit作为增强，用于同时渲染两者的浏览器：

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox仅遵循现代的scrollbar-*规则。Chrome和Safari遵循webkit规则（这些规则会覆盖现代规则，因此行为保持一致）。

scrollbar-gutter防止内容偏移

若未预留间隙，当滚动条出现时内容会重新排布（在动态列表中很常见）。解决方法：

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

无论内容是否滚动，都会为滚动条预留位置。both-edges会在相对的一侧添加相匹配的间隙，使内容在视觉上保持居中。

完全隐藏滚动条

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

请注意：隐藏滚动条会让用户看不到内容可以滚动。仅在配有明确指示（箭头、页面圆点）时使用，或者当滚动行为从上下文中显而易见时使用（如水平轮播、聊天记录）。

移动端注意事项

在iOS和Android上，滚动条仅在滚动时短暂出现。你自定义的滚动条CSS仍会生效，但用户看到它的时间可能不会超过一秒。请据此进行设计，不要在很少出现的视觉细节上投入过多精力。

无障碍性

• 对比度：滑块相对于轨道，应满足非文本对比度3:1（WCAG 1.4.11）。
• 宽度：细滚动条用鼠标较难抓取，对运动功能受限的用户尤其如此。普通宽度是更安全的默认值。
• 切勿移除滚动区域上的滚动条，除非提供其他滚动方式。依赖滚动条的用户否则将无法操作。