css 自定义滚动条

/* 自定义滚动条样式 */

/* 滚动条整体部分 */
::-webkit-scrollbar {
    width: 10px; /* 滚动条宽度 */
}

/* 滚动条的轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道背景颜色 */
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
    background: #888; /* 滑块背景颜色 */
    border-radius: 5px; /* 滑块圆角 */
}

/* 鼠标悬停时滑块的颜色 */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* 悬停时滑块背景颜色 */
}

/* 滚动条的两端按钮（如果有的话） */
::-webkit-scrollbar-button {
    background: #ddd; /* 按钮背景颜色 */
}

/* 滚动条的角落（如果有的话） */
::-webkit-scrollbar-corner {
    background: #eee; /* 角落背景颜色 */
}

解释说明：

1. ::-webkit-scrollbar：定义整个滚动条的宽度和高度。这里我们设置了宽度为 10px。
2. ::-webkit-scrollbar-track：定义滚动条轨道的样式，包括背景颜色等。这里我们设置了轨道的背景颜色为浅灰色 (#f1f1f1)。
3. ::-webkit-scrollbar-thumb：定义滚动条滑块的样式，包括背景颜色和圆角。这里我们设置了滑块的背景颜色为深灰色 (#888)，并且添加了圆角效果。
4. ::-webkit-scrollbar-thumb:hover：定义鼠标悬停在滑块上时的样式。这里我们设置了悬停时滑块的背景颜色为更暗的灰色 (#555)。
5. ::-webkit-scrollbar-button：定义滚动条两端按钮的样式（如果存在）。这里我们设置了按钮的背景颜色为淡灰色 (#ddd)。
6. ::-webkit-scrollbar-corner：定义滚动条角落的样式（如果存在）。这里我们设置了角落的背景颜色为稍浅的灰色 (#eee)。

这些样式仅适用于基于 WebKit 的浏览器（如 Chrome 和 Safari），其他浏览器可能需要使用不同的前缀或属性来实现类似的效果。