CSS scrollbar 滚动条样式

CSS滚动条样式：scrollbar-width(thin/auto/none)/scrollbar-color(thumb颜色 track颜色)（CSS Scrollbars标准/Firefox支持/Chrome用::-webkit-scrollbar伪元素群::-webkit-scrollbar-track/::-webkit-scrollbar-thumb/::-webkit-scrollb · 难度：入门 · +10XP

CSS 自定义滚动条 —— scrollbar-width 和 scrollbar-color

浏览器默认的滚动条在不同系统上外观不同——Windows上是粗灰条，Mac上是细透明条。CSS现在可以统一控制滚动条样式了。

标准属性（Firefox）

.custom-scroll {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #888 #f0f0f0;  /* 滑块颜色 轨道颜色 */
}

WebKit私有属性（Chrome/Safari）

.custom-scroll::-webkit-scrollbar {
  width: 8px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

最佳实践：两种都写，覆盖所有浏览器。

动手练习

1. 基础练习：给页面的代码块区域自定义滚动条样式——细条、圆角、深色滑块。
2. 进阶应用：做一个暗黑模式下的滚动条——轨道深色、滑块浅色。
3. 项目实战：统一全站滚动条样式，让Firefox和Chrome都有一致的外观。