技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統(tǒng)
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

[15個實例]CSS自定義滾動條的樣式:圓角/平角/寬度/顏色等

作者:admin    時間:2023-4-14 12:35:59    瀏覽:

在 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);
}

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

 [15個實例]CSS自定義滾動條的樣式

demodownload

注意問題

本文中提及的CSS屬性,在Chrome和Safari瀏覽器里表現完美,但不支持Firefox瀏覽器。

相關文章

標簽: css  scrollbar  滾動條  
x
  • 站長推薦
/* 左側顯示文章內容目錄 */