请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

如何用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”伪类设置了滑块悬停时的颜色。

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。