在本文中，我们将深入探讨滚动条的世界。 我知道，这听起来不太迷人，但相信我，精心设计的页面与匹配的滚动条密不可分。 老式的 chrome 滚动条不太适合。
我们将研究滚动条的细节，然后看一些很酷的例子。
滚动条的组件
这更像是一个复习，真的。 有一个 一堆关于 CSS-Tricks 的帖子 当涉及到 CSS 中的自定义滚动条样式时，它会深入细节。
要设置滚动条的样式，您需要熟悉滚动条的结构。 看看这个插图：
这里要记住的两个主要组成部分是：
- 跟踪时 是栏下方的背景。
- 拇指 是用户单击并拖动的部分。
我们可以使用 vendor-prefixed 更改完整滚动条的属性::-webkit-scrollbar 选择器。 我们可以给滚动条一个固定的宽度、背景颜色、圆角……很多东西！ 如果我们正在自定义页面的主滚动条，那么我们可以使用 ::-webkit-scrollbar 直接在 HTML 元素上：
html::-webkit-scrollbar {
/* Style away! */
}如果我们正在定制一个滚动框，那是 overflow: scroll，那么我们可以使用 ::-webkit-scrollbar 在那个元素上：
.element::-webkit-scrollbar {
/* Style away! */
}这是一个简单的示例，它对 HTML 元素的滚动条进行样式设置，使其具有红色背景：
如果我们只想改变滚动条的拇指或轨道怎么办？ 你猜对了——我们对这两个有特殊的前缀伪元素： ::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track， 分别。 当我们把所有这些东西放在一起时，这是一个可能的想法：
刷够了！ 我想向您展示三个程度的自定义滚动条样式，然后打开一个大型展示从网络上提取的示例以获取灵感。
简单而优雅的滚动条
自定义滚动条仍然可以是最小的。 我整理了一组微妙地改变外观的示例，无论是对拇指或轨道进行轻微的颜色更改，还是对背景进行一些浅色样式。
如您所见，在滚动条样式方面我们不必发疯。 有时，通过与整体主题相匹配的滚动条来增强整体用户体验只需进行细微的更改。
酷炫醒目的滚动条
但是让我们承认吧：有点过火并锻炼一些创造力很有趣。 这里有一些奇怪而独特的滚动条，在某些情况下可能“太多”，但它们确实很引人注目。
多一个…
我们在火车上用滚动条旋转拇指和轨道，好吧，轨道怎么样！
