在 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  滾動條