CSS | scrollbar-color 属性

CSS | scrollbar-color 属性定义了滚动条的颜色。

语法

scrollbar-color: auto|<color>{1,2};

属性值

• auto：浏览器自动根据主题设置滚动条颜色。
• {1,2}：定义一到两种颜色值并分别应用于滚动条的前景和背景。必须指定至少一种颜色值。

示例

简单示例

/* 将滚动条设为红色 */
::-webkit-scrollbar {
  background-color: #F5F5F5;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #FF0000;
  border-radius: 20px;
}

两种颜色值示例

/* 将滚动条的前景设为红色，背景设为灰色 */
::-webkit-scrollbar {
  width: 10px;
  background-color: #E8E8E8;
}

::-webkit-scrollbar-thumb {
  background-color: #FF0000;
}

::-webkit-scrollbar-track {
  background-color: #E8E8E8;
}

兼容性

| Chrome | Firefox | Safari | IE / Edge | Opera | | ----------- | ----------- | ----------- | ---------- | ---------- | | 69.0 | 64.0 | 11.0 | 不支持 | 56.0 |

注意事项

• 该属性只适用于一些 Webkit 浏览器，如 Chrome、Safari 等。
• 该属性不应滥用，为了用户体验，滚动条的颜色应当与主题相匹配。