css滚动条颜色怎么设置

lewis 7年前 (2019-01-13) 阅读数 13 #程序编程

文章标签 css

CSS中可以通过::-webkit-scrollbar伪元素来设置滚动条的样式，包括颜色。

以下是一个设置滚动条颜色的示例：

/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 10px; /* 设置滚动条的宽度 */
}
/* 设置滚动条的轨道背景颜色 */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
/* 设置滚动条的滑块颜色 */
::-webkit-scrollbar-thumb {
background-color: #888;
}
/* 设置滚动条的滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
background-color: #555;
}

在上述示例中，::-webkit-scrollbar伪元素用于设置滚动条的样式，::-webkit-scrollbar-track用于设置滚动条的轨道背景颜色，::-webkit-scrollbar-thumb用于设置滚动条的滑块颜色，::-webkit-scrollbar-thumb:hover用于设置滚动条的滑块悬停时的颜色。

需要注意的是，这些样式只在支持WebKit内核的浏览器中生效，如Chrome、Safari等。不同浏览器对滚动条样式的支持可能有所不同。