卡卡网

在 CSS 中可以使用自定义属性来设置滚动条的样式，滚动条主要属性有3个：

• scrollbar
• scrollbar-thumb
• scrollbar-track

其中，scrollbar设置滚动条高度、宽度，scrollbar-thumb设置垂直滚动条，scrollbar-track设置轨道样式。

例如下面的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);
}

了解了这些之后，我们可以创建出很多不同样式的滚动条，这里提供15个示例。

demodownload

注意问题

本文中提及的CSS属性，在Chrome和Safari浏览器里表现完美，但不支持Firefox浏览器。

相关文章

• 如何用CSS自定义滚动条宽度及轨道背景颜色
• 4个纯CSS自定义的炫酷醒目的滚动条
• 6个纯CSS自定义的简单而优雅的滚动条样式

标签: css  scrollbar  滚动条