使用CSS自定义浏览器滚动条 (webkit 已最新支持 scrollbar-width)
/* 自定义滚动条的宽度 */
::-webkit-scrollbar {
width: 12px; /* 水平滚动条的高度、垂直滚动条的宽度 */
}
/* 自定义滚动条轨道的样式 */
::-webkit-scrollbar-track {
background: #f1f1f1; /* 滚动条轨道的背景颜色 */
}
/* 自定义滚动条的样式 */
::-webkit-scrollbar-thumb {
background: #888; /* 滚动条的背景颜色 */
}
/* 当鼠标悬停在滚动条上时的样式 */
::-webkit-scrollbar-thumb:hover {
background: #555; /* 滚动条的背景颜色 */
}这段代码使用了WebKit内核浏览器支持的伪元素::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb来自定义滚动条的样式。这包括设置滚动条的宽度、轨道的背景色以及滚动条的颜色，当鼠标悬停在滚动条上时，滚动条的颜色会有所变化。这为用户提供了更加个性化的浏览器滚动体验。
评论已关闭