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: #ccc; /* 设置按钮背景颜色 */
}

/* 滚动条角落，即两个滚动条相交的地方 */
::-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）。对于 Firefox 和其他非 WebKit 浏览器，需要使用不同的方法来定制滚动条样式。