艾Q网

标题: 如何用CSS设置滚动条的样式 [打印本页]

作者: admin 时间: 2023-11-11 09:51
标题: 如何用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”伪类设置了滑块悬停时的颜色。

欢迎光临艾Q网 (http://js.iqi123.com/bbs/)