css 滚动

/* 示例代码：使用 CSS 实现滚动条样式 */

/* 1. 修改整个页面的滚动条样式 */
body::-webkit-scrollbar {
    width: 10px; /* 滚动条宽度 */
}

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

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

body::-webkit-scrollbar-thumb:hover {
    background: #555; /* 鼠标悬停时滚动条滑块颜色 */
}

/* 2. 修改特定元素的滚动条样式 */
.custom-scroll {
    overflow-y: scroll; /* 允许垂直滚动 */
    height: 200px; /* 设置元素高度，以触发滚动 */
}

.custom-scroll::-webkit-scrollbar {
    width: 8px; /* 滚动条宽度 */
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #4CAF50; /* 滚动条滑块颜色 */
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #45a049; /* 鼠标悬停时滚动条滑块颜色 */
}

解释说明：

• ::-webkit-scrollbar：用于定义整个滚动条的样式。
• ::-webkit-scrollbar-track：用于定义滚动条轨道的样式。
• ::-webkit-scrollbar-thumb：用于定义滚动条滑块的样式。
• hover：当鼠标悬停在滚动条滑块上时，改变其颜色。

以上代码适用于基于 WebKit 内核的浏览器（如 Chrome 和 Safari）。对于其他浏览器，可能需要使用不同的前缀或属性来实现类似效果。