如何用CSS设置滚动条的样式

通过CSS样式，我们可以轻松地定义当内容超出容器时滑动条的出现方式。

/* 设置滑动条样式 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 设置滑块样式 */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
/* 设置滑块悬停样式 */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* 隐藏滚动条轨道 */
::-webkit-scrollbar-track {
background: transparent;
}
在上面的样式中，我们使用了WebKit（Chrome和Safari浏览器）特有的伪类“::-webkit-scrollbar”来设置滑动条的样式。具体来说，我们使用“width”和“height”属性定义了滑动条的大小，使用“background”属性定义了滑块的背景颜色。类似地，“::-webkit-scrollbar-thumb:hover”使用“hover”伪类设置了滑块悬停时的颜色。