卡卡網(wǎng)

在 CSS 中可以使用自定義屬性來設(shè)置滾動(dòng)條的樣式，滾動(dòng)條主要屬性有3個(gè)：

• scrollbar
• scrollbar-thumb
• scrollbar-track

其中，scrollbar設(shè)置滾動(dòng)條高度、寬度，scrollbar-thumb設(shè)置垂直滾動(dòng)條，scrollbar-track設(shè)置軌道樣式。

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

了解了這些之后，我們可以創(chuàng)建出很多不同樣式的滾動(dòng)條，這里提供15個(gè)示例。

demodownload

注意問題

本文中提及的CSS屬性，在Chrome和Safari瀏覽器里表現(xiàn)完美，但不支持Firefox瀏覽器。

相關(guān)文章

• 如何用CSS自定義滾動(dòng)條寬度及軌道背景顏色
• 4個(gè)純CSS自定義的炫酷醒目的滾動(dòng)條
• 6個(gè)純CSS自定義的簡(jiǎn)單而優(yōu)雅的滾動(dòng)條樣式

標(biāo)簽: css  scrollbar  滾動(dòng)條