优雅而酷炫的自定义CSS滚动条

大家好，欢迎来到IT知识分享网。

在本文中，我们将深入了解滚动条的世界。我知道，这听起来不太迷人，但相信我，精心设计的页面与匹配的滚动条齐头并进。老式的镀铬滚动条只是不适合那么多。

我们将研究滚动条的细节，然后看看一些很酷的例子。

滚动条的组成部分

要设置滚动条的样式，您需要熟悉滚动条的解剖结构。请看这张图：

这里要记住的两个主要组成部分是：

1. scrollbar track是滚动条下方的背景。
2. scrollbar humb是用户单击和拖动的部分。

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

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

如果我们自定义一个滚动框，这是溢出的结果：滚动，那么我们可以在该元素上使用 ：：-webkit-scrollbar：

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

下面是一个快速示例，它设置 HTML 元素滚动条的样式，使其宽，背景为红色：

如果我们只想更改滚动条的thumb或track怎么办？你猜对了——我们分别为这两个元素提供了特殊的前缀伪元素：：：-webkit-scrollbar-thumb 和 ：：-webkit-scrollbar-track。以下是我们将所有这些东西放在一起时可能实现的想法：

向您展示三个度的自定义滚动条样式，然后打开一个从网络上提取示例的大型展示，以获取灵感。

简单而优雅的滚动条

自定义滚动条仍然可以是最小的。我整理了一组示例，这些示例巧妙地改变了外观，无论是对拇指或轨道进行轻微的颜色更改，还是对背景进行一些浅色造型。

如您所见，在滚动条样式方面，我们不必发疯。有时，只需进行细微的更改即可通过与整体主题匹配的滚动条来增强整体用户体验.

html::-webkit-scrollbar{
  width: 50px;
  background:red;
}

如果我们只想更改滚动条的拇指或轨道怎么办？你猜对了——我们分别为这两个元素提供了特殊的前缀伪元素：：：-webkit-scrollbar-thumb 和 ：：-webkit-scrollbar-track。以下是我们将所有这些东西放在一起时可能实现的想法：

html::-webkit-scrollbar {
  width: 30px;
}
 
html::-webkit-scrollbar-track {
  background: black;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
html::-webkit-scrollbar-thumb {
  background: red;
  border: 3px solid blue;
}

向您展示三个度的自定义滚动条样式，然后打开一个从网络上提取示例的大型展示，以获取灵感。

简单而优雅的滚动条

自定义滚动条仍然可以是最小的。我整理了一组示例，这些示例巧妙地改变了外观，无论是对拇指或轨道进行轻微的颜色更改，还是对背景进行一些浅色造型。

.container { display: flex; margin: 50px; column-gap: 20px; } .scrollbar { height: 300px; width: 50%; overflow: auto; padding: 0 10px; } /* ScrollBar 1 */ #scrollbar1::-webkit-scrollbar { width: 10px; } #scrollbar1::-webkit-scrollbar-track { border-radius: 8px; background-color: #e7e7e7; border: 1px solid #cacaca; } #scrollbar1::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #d55959; } /* ScrollBar 2 */ #scrollbar2::-webkit-scrollbar { width: 12px; } #scrollbar2::-webkit-scrollbar-track { border-radius: 8px; background-color: #e7e7e7; border: 1px solid #cacaca; box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); } #scrollbar2::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #; } /* ScrollBar 3 */ #scrollbar3::-webkit-scrollbar { width: 12px; } #scrollbar3::-webkit-scrollbar-track { background-color: #e7e7e7; border: 1px solid #cacaca; } #scrollbar3::-webkit-scrollbar-thumb { background-color: #060b9a; } /* ScrollBar 4 */ #scrollbar4::-webkit-scrollbar { width: 12px; } #scrollbar4::-webkit-scrollbar-track { background-color: transparent; border: 1.5px solid #7e7e7e; border-radius: 8px; } #scrollbar4::-webkit-scrollbar-thumb { background-color: #f1f1f1; border: 2px solid #; border-radius: 8px; } /* ScrollBar 5 */ #scrollbar5::-webkit-scrollbar { background-color: #000; width: 12px; border-radius: 10px; } #scrollbar5::-webkit-scrollbar-track { border-radius: 10px; box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3); } #scrollbar5::-webkit-scrollbar-thumb { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc)); border-radius: 10px; } /* ScrollBar 6 */ #scrollbar6::-webkit-scrollbar { width: 12px; } #scrollbar6::-webkit-scrollbar-track { border-radius: 8px; background-color: #95a5a6; border: 1px solid #cacaca; } #scrollbar6::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #2c3e50; }

如您所见，在滚动条样式方面，我们不必发疯。有时，只需进行细微的更改即可通过与整体主题匹配的滚动条来增强整体用户体验。