滚动条样式自定义：使用 scrollbar-color 和 scrollbar-width

发布日期：2025 年 2 月 1 日

兼容性说明：该 Web 功能已在所有三大浏览器引擎中可用。截至 2024 年 12 月 11 日，已被纳入基线支持范围。

scrollbar-color 属性

scrollbar-color 属性允许开发者自定义滚动条的颜色。通过该属性，您可以指定滚动条滑块的颜色以及其对应的轨道颜色。

.element {
  scrollbar-color: #ff6b6b #f0f0f0;
}

scrollbar-width 属性

scrollbar-width 属性则用于控制滚动条的宽度。您可以将滚动条设置为更窄的样式，或者在不影响元素可滚动性的前提下完全隐藏滚动条。

.element {
  scrollbar-width: thin; /* 或 'none' 来隐藏滚动条 */
}

实际应用示例

以下是一个结合使用两个属性的完整示例：

.custom-scrollbar {
  scrollbar-color: #4f46e5 #e5e7eb;
  scrollbar-width: thin;
  overflow: auto;
  height: 200px;
}

了解更多

要深入了解滚动条及其样式设置的更多细节，请参考滚动条样式设置指南。