当前位置：首页 > 行业动态 > 正文

css怎么设置滚动条样式

admin
行业动态
2023-12-31
4

你可以使用CSS伪元素和属性来自定义浏览器滚动条的样式，包括高宽、轨道、滑块、边框、阴影等。以下是一些基本的CSS规则，用于美化滚动条：，，- 整个滚动条：::-webkit-scrollbar { width: 12px; height: 12px; background-color: #f9f9fd;}，- 滚动条轨道：::- webkit-scrollbar-track { background-color: #f0f0f0;}，- 滚动条滑块：::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px;}，- 滚动条边框：::-webkit-scrollbar-button { background-color: #f0f0f0; border-radius: 5px;}，- 滚动条阴影：：:-webkit-scrollbar-corner { background-color: #f0f0f0;}

CSS怎么设置滚动条样式

在CSS中，我们可以通过伪元素::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track和::-webkit-scrollbar-corner来自定义滚动条的样式，以下是一个简单的示例：

/* 整体滚动条 */
::-webkit-scrollbar {
    width: 10px; /* 滚动条宽度 */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: f5f5f5; /* 轨道颜色 */
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: c1c1c1; /* 滑块颜色 */
    border-radius: 5px; /* 滑块圆角 */
}
/* 鼠标悬停在滚动条滑块上时的效果 */
::-webkit-scrollbar-thumb:hover {
    background-color: 909090; /* 滑块鼠标悬停颜色 */
}