本文详细介绍了如何使用CSS针对Webkit内核的浏览器定制滚动条的样式，包括设置宽度、背景颜色、边框、圆角和滑块颜色，以及滑块的悬停效果。注意这种方法可能不适用于所有浏览器。
上代码：
::-webkit-scrollbar {
/* 设置滚动条的宽度 */
width: 8px;
/* 设置滚动条的背景颜色 */
background-color: rgba(red, green, blue, 0);
/* 设置滚动条的边框样式和颜色 */
/* border: 1px solid rgb(49, 162, 255); */
/* 设置滚动条的圆角 */
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
/* 设置滚动条的宽度 */
width: 8px;
/* 设置滑块的颜色 */
background-color: rgb(224, 227, 235);
/* 设置滑块的背景样式 */
background-clip: content-box;
/* 设置滑块的圆角 */
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
/* 设置滑块的悬停颜色 */
background-color: rgb(252, 146, 146);
}
***此方法可能不适用于所有浏览器***
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
