css设置滚动条样式

/* 自定义滚动条样式 */
/* 1. 设置滚动条的宽度 */
::-webkit-scrollbar {
    width: 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: #ddd; /* 按钮背景颜色 */
}

/* 6. 设置滚动条角落的样式（如果有两个滚动条相交的地方） */
::-webkit-scrollbar-corner {
    background: #eee; /* 角落背景颜色 */
}

解释说明：

• ::-webkit-scrollbar：用于设置整个滚动条的宽度。
• ::-webkit-scrollbar-track：用于设置滚动条轨道的样式，比如背景颜色。
• ::-webkit-scrollbar-thumb：用于设置滚动条滑块的样式，包括背景颜色和圆角。
• ::-webkit-scrollbar-thumb:hover：用于设置滑块在鼠标悬停时的样式。
• ::-webkit-scrollbar-button：用于设置滚动条两端按钮的样式（某些浏览器可能不显示按钮）。
• ::-webkit-scrollbar-corner：用于设置两个滚动条相交处的样式（通常出现在右下角）。

这些样式主要适用于基于 WebKit 内核的浏览器（如 Chrome 和 Safari），其他浏览器可能需要使用不同的前缀或属性。