css 自定义滚动条
时间: 2023-11-04 15:58:26 浏览: 53
CSS提供了一种自定义滚动条的方法。可以使用`::-webkit-scrollbar`伪元素来设置整个滚动条的样式,使用`::-webkit-scrollbar-thumb`来设置滑块的样式,使用`::-webkit-scrollbar-track`来设置轨道的样式。可以使用`::-webkit-scrollbar-thumb:horizontal`和`::-webkit-scrollbar-track:horizontal`来设置水平方向上的滑块和轨道的样式。
以下是一个示例代码来自定义滚动条的样式:
```
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-thumb {
background-color: lightsteelblue;
}
::-webkit-scrollbar-track {
background-color: lightgreen;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: lightseagreen;
}
::-webkit-scrollbar-track:horizontal {
background-color: lightsalmon;
}
::-webkit-scrollbar-corner {
background-color: lightcoral;
}
```
这段代码将会设置滚动条的宽度为15px,滑块的背景颜色为lightsteelblue,轨道的背景颜色为lightgreen,水平方向上滑块的背景颜色为lightseagreen,水平方向上轨道的背景颜色为lightsalmon,滚动条交汇处的背景颜色为lightcoral。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)