首页 > Web开发 > 详细

纯CSS改变webkit内核浏览器的滚动条样式

时间:2016-02-08 13:00:31      阅读:142      评论:0      收藏:0      [点我收藏+]

基于webkit的浏览器现在可以自定义其滚动条的样式了,实现代码如下:


复制代码
代码如下:

::-webkit-scrollbar/*整体部分*/
{
width: 10px;
height:10px;
}

::-webkit-scrollbar-track/*滑动轨道*/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb/*滑块*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}

效果:
技术分享

纯CSS改变webkit内核浏览器的滚动条样式

原文:http://www.jb51.net/css/155135.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!