优雅酷炫的自定义 CSS 滚动条：展示

在这篇文章中，我们将深入探讨滚动条的世界。我知道，这听起来并不太迷人，但相信我，一个设计良好的页面与匹配的滚动条是相辅相成的。老式的 Chrome 滚动条已经不太合适了。

我们将深入了解滚动条的细节，然后看看一些酷炫的示例。

滚动条的组成部分

这更像是一个复习，实际上。在 CSS-Tricks 上有 很多文章 深入探讨了 CSS 中自定义滚动条样式。

要为滚动条设置样式，您需要熟悉滚动条的结构。请查看此插图

这里需要记住的两个主要组件是

1. **轨道**是条形下方背景。
2. **滑块**是用户点击并拖动的那一部分。

我们可以使用带供应商前缀的 ::-webkit-scrollbar 选择器更改整个滚动条的属性。我们可以为滚动条设置固定宽度、背景颜色、圆角……很多东西！如果我们正在自定义页面的主滚动条，那么可以直接在 HTML 元素上使用 ::-webkit-scrollbar

html::-webkit-scrollbar {
  /* Style away! */
}

如果我们正在自定义由 overflow: scroll 生成的滚动框，那么我们可以改为在该元素上使用 ::-webkit-scrollbar

.element::-webkit-scrollbar {
  /* Style away! */
}

这是一个快速示例，它为 HTML 元素的滚动条设置样式，使其变宽并具有红色背景

如果我们只想更改滚动条的滑块或轨道怎么办？您猜对了——我们有专门的前缀伪元素分别用于这两个元素：::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track。当我们将所有这些内容放在一起时，以下是可能的示例

复习结束！我想向您展示三种自定义滚动条样式，然后展示从网络上收集的大量示例，以供您获得灵感。

简单优雅的滚动条

自定义滚动条仍然可以保持极简风格。我整理了一组示例，它们巧妙地改变了外观，无论是滑块或轨道的细微颜色变化，还是背景的一些轻微样式。

如您所见，在滚动条样式方面，我们不必过于复杂。有时，只需一个细微的变化就足以增强整体用户体验，并使滚动条与整体主题相匹配。

酷炫吸睛的滚动条

但让我们承认：稍微过分一点并发挥一些创造力是很有趣的。这里有一些奇特而独特的滚动条，在某些情况下可能“过于花哨”，但它们确实很吸引眼球。

再来一个……

我们不妨让滚动条在火车上旋转，滑块和轨道分别代表火车和轨道！