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：选择整个滚动条，可以设置滚动条的整体宽度。
• ::-webkit-scrollbar-track：选择滚动条的轨道部分，可以设置轨道的背景颜色等样式。
• ::-webkit-scrollbar-thumb：选择滚动条的滑块部分，可以设置滑块的颜色、圆角等样式。
• ::-webkit-scrollbar-thumb:hover：当鼠标悬停在滑块上时，改变滑块的样式。

这些样式只适用于基于 WebKit 的浏览器（如 Chrome 和 Safari）。对于其他浏览器，可能需要使用不同的方法或依赖第三方库来实现类似的效果。