css横向滚动条样式

/* 设置横向滚动条样式 */
::-webkit-scrollbar {
    height: 10px; /* 滚动条高度 */
}

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

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

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

/* 确保容器内容超出宽度时显示横向滚动条 */
.container {
    width: 300px;
    overflow-x: auto; /* 横向溢出时显示滚动条 */
    white-space: nowrap; /* 防止内容换行 */
}

.item {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-right: 10px;
}

解释说明：

• ::-webkit-scrollbar：定义整个滚动条的样式，包括高度。
• ::-webkit-scrollbar-track：定义滚动条轨道的样式，如背景颜色。
• ::-webkit-scrollbar-thumb：定义滚动条滑块的样式，如背景颜色和圆角。
• ::-webkit-scrollbar-thumb:hover：定义鼠标悬停在滑块上时的样式。
• .container：设置一个固定宽度的容器，并使用 overflow-x: auto 来确保当内容超出容器宽度时显示横向滚动条。white-space: nowrap 用于防止内容换行。
• .item：定义一些示例项目，它们会水平排列并超出容器宽度，从而触发横向滚动条。

这样就可以自定义横向滚动条的样式了。