css 设置滚动条

/* 自定义滚动条样式 */
/* 1. 设置滚动条的宽度 */
::-webkit-scrollbar {
    width: 10px; /* 对于垂直滚动条 */
    height: 10px; /* 对于水平滚动条 */
}

/* 2. 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* 3. 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

/* 4. 鼠标悬停时改变滑块颜色 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 5. 设置滚动条的按钮（可选） */
::-webkit-scrollbar-button {
    background: #ccc;
}

解释说明：

1. 设置滚动条的宽度：通过 ::-webkit-scrollbar 选择器可以设置整个滚动条的宽度或高度。
2. 滚动条轨道：使用 ::-webkit-scrollbar-track 可以自定义滚动条轨道的背景颜色或其他样式。
3. 滚动条滑块：::-webkit-scrollbar-thumb 用于设置滑块的样式，如背景颜色和圆角。
4. 鼠标悬停时改变滑块颜色：::-webkit-scrollbar-thumb:hover 用于在用户将鼠标悬停在滑块上时改变其样式。
5. 设置滚动条的按钮（可选）：::-webkit-scrollbar-button 用于设置滚动条两端的按钮样式（如果存在）。

注意：这些样式仅适用于基于 WebKit 的浏览器（如 Chrome 和 Safari）。对于其他浏览器，可能需要使用不同的方法来定制滚动条。