CSS3使用-webkit-scrollbar自定义页面滚动条样式

当html页面里填充的内容高度超过浏览器窗口的高度的时候,页面就会出现滚动条。滚动条的样式都是浏览器内自定义的。并没有很美观。但是我们可以通过css把滚动条强制转换成我们需要的样式。
<style type=”text/css”>
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 6px;
height: 6px;
background-color: #F5F5F5;
}

/*滚动条轨道样式*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #666;
}

/*滑块样式*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #999;
}
</style>
Tips:火狐浏览器不支持!!!

更多代码请关注代码日记本~

原文链接:,转发请注明来源!

发表评论

要发表评论,您必须先登录