CSS 中滚动条样式的现状（2022 年更新）

要为滚动条样式提供尽可能广泛的跨浏览器支持，您最好的选择是使用特殊的 ::webkit 前缀 滚动条 CSS 属性（Chrome 和 Safari 目前需要这些属性）以及标准化的 scrollbar-width 和 scrollbar-color 属性（目前 Firefox 使用这些属性）。

因此，基本设置如下所示

.styled-scrollbars {
  /* Foreground, Background */
  scrollbar-color: #999 #333;
}
.styled-scrollbars::-webkit-scrollbar {
  width: 10px; /* Mostly for vertical scrollbars */
  height: 10px; /* Mostly for horizontal scrollbars */
}
.styled-scrollbars::-webkit-scrollbar-thumb { /* Foreground */
  background: #999;
}
.styled-scrollbars::-webkit-scrollbar-track { /* Background */
  background: #333;
}

使用自定义属性为 CSS 中的滚动条设置样式

您可以使用 自定义属性 使代码更简洁，例如

.styled-scrollbars {
  --scrollbar-foreground: #999
  --scrollbar-background: #333
  /* Foreground, Background */
  scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}
.styled-scrollbars::-webkit-scrollbar {
  width: 10px; /* Mostly for vertical scrollbars */
  height: 10px; /* Mostly for horizontal scrollbars */
}
.styled-scrollbars::-webkit-scrollbar-thumb { /* Foreground */
  background: var(--scrollbar-foreground);
}
.styled-scrollbars::-webkit-scrollbar-track { /* Background */
  background: var(--scrollbar-background);
}

Sass 混合器和其它预处理选项

如果您使用 Sass，您可以像这样抽象化用法，从而允许自定义参数

@mixin scrollbars(
  $size: 10px,
  $foreground-color: #999,
  $background-color: #333
) {
  // For Chrome & Safari
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }
  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }
  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  // Standard version (Firefox only for now)
  scrollbar-color: $foreground-color $background-color;
}

您可能会认为 Autoprefixer 可以帮助解决供应商前缀问题，但它们的语法差异太大，以至于它 似乎对解决这个问题并不感兴趣，我对此表示理解。

如果您正在使用 PostCSS，则有一个 postcss-scrollbar 插件。其理念是您编写标准化语法，它会创建匹配的供应商前缀版本。这意味着您在样式选择方面仅限于规范提供的内容，但这可能是一个明智的长期策略。

/* input */
.scrollable {
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

/* output */
.scrollable::-webkit-scrollbar-thumb {
  background-color: rebeccapurple;
}
.scrollable::-webkit-scrollbar-track {
  background-color: green;
}
.scrollable::-webkit-scrollbar-corner {
  background-color: green;
}
.scrollable::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
.scrollable {
  -ms-overflow-style: auto;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

更多奇特的 Chrome 和 Safari 滚动条样式

用于在 CSS 中设置滚动条样式的非标准 ::-webkit- 属性比标准化属性具有更多样式可能性。例如，我可以使垂直滚动条的宽度非常宽，使背景轨道具有内嵌阴影，而前景滑块具有渐变

以下是使用供应商前缀方法的更多花式样式

CodePen 上有很多这样的样式 供您浏览。

使用 JavaScript 设置滚动条样式

如果样式化的滚动条是必需的，并且您需要在所有浏览器中完美实现非常详细的设计控制，那么您可能需要使用 JavaScript 解决方案。一定有数十个这样的库。我发现了 simplebar，它看起来是一个非常现代化的库，易于实例化。这是一个演示

另一个库叫做 simple-scrollbar

Das Surma 做了一个 非常花哨的教程，它创建了一个自定义滚动条，滚动时实际上不需要任何 JavaScript（有利于性能），但需要一些 JavaScript 设置代码。

自定义滚动条极其罕见，这主要是因为滚动条是 Web 上为数不多的几个几乎无法设置样式的部分（我指的是您，日期选择器）。您可以使用 JavaScript 构建自己的滚动条，但这很昂贵，保真度低，而且可能感觉很滞后。在本文中，我们将利用一些非常规的 CSS 矩阵来构建一个自定义滚动器，在滚动时不需要任何 JavaScript，只需要一些设置代码。

我将在这里嵌入一个副本

自定义滚动条的跨浏览器演示

在 Chrome、Safari 和 Firefox 中相当一致

这是一个截图，如果您在移动设备上或无法查看这些内容，可以查看截图

关于 macOS 上 Firefox 的说明

scrollbar-width 属性无论如何都会起作用，但 scrollbar-color 属性 仅在您在“常规”系统偏好设置中选中“显示滚动条：始终”时才起作用。