CSS如何自定义滚动条样式-开发者知识库平台

CSS如何自定义滚动条样式

css

1017

2023/7/15 13:02:25

栏目: 编程语言

CSS中可以使用::-webkit-scrollbar伪元素来自定义滚动条样式。具体步骤如下：

先为滚动条指定一个宽度和高度：

::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
height: 8px; /* 滚动条高度 */
}

设置滚动条的背景颜色：

::-webkit-scrollbar {
background-color: #f1f1f1; /* 滚动条背景颜色 */
}

设置滚动条的滑块样式：

::-webkit-scrollbar-thumb {
background-color: #888; /* 滑块背景颜色 */
border-radius: 4px; /* 滑块圆角 */
}

设置滚动条的轨道样式：

::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 轨道背景颜色 */
border-radius: 4px; /* 轨道圆角 */
}

设置滚动条的边框样式：

::-webkit-scrollbar {
border: 1px solid #ccc; /* 滚动条边框样式 */
}

完整示例：

::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 4px;
}

注意：这种方法只能在使用WebKit内核的浏览器中生效，如Chrome、Safari等。对于Firefox等其他浏览器，可以使用scrollbar相关属性来自定义滚动条样式。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

CSS如何自定义滚动条样式

最新知识库

相关标签