[分享] 通过修改CSS自定义chrome滚动条样式

首先得说一句我不懂CSS的写法之类的这段CSS也是在网上找的所以有更先进的需求的话我肯定不能满足你们了不好意思
效果图在10楼有人上了我这边不管怎么弄上传图片都卡在96% 而且不翻wall不能回帖翻wall的情况下上论坛这个慢啊所以大家去看这个图吧http://bbs.kafan.cn/forum.php?mo ... &fromuid=487958
大家都知道哈 chrome能自定义的东西比较少不像FF或者opera那样几个样式或者脚本就能把浏览器改成任何想要的样子不过今天我抽时间研究了一下发现自定义个滚动条还是可以的毕竟对于chrome来说 UI上的东西本来就很少标签页可以通过主题修改那么滚动条就可以通过CSS修改了

::-webkit-scrollbar
{
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track-piece
{
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical
{
height: 5px;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 5px;
-webkit-border-radius: 6px;
}

复制代码

代码就是上面那些我大概讲一下这段代码的意思看图那个非常不好意思卡饭不能上传图片我只好外链一下

大家不要直接我用的这个参数我就是随便给了几个其实大家也可以看出来如果把垂直和水平的参数设置成不一样的那么垂直和水平的滚动条宽度啊颜色啊就会不同其实好好修改一下也是挺好看的

滚动条颜色设置（IE、chrome浏览器）

/*滚动条*/#nicescroll1{overflow-y:auto;overflow-x:hidden;height:580px;scrollbar-arrow-color:#302D30; /*三角箭头的颜色*/scrollbar-face-color:#000; /*立体滚动条的颜色（包括箭头部分的背景色）*/scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色（左阴影？）*/scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/scrollbar-track-color:#302D30; /*立体滚动条背景颜色*/scrollbar-base-color:#302D30; /*滚动条的基色*/}#nicescroll2{overflow-y:auto;overflow-x:hidden;height:396px;scrollbar-arrow-color:#302D30; /*三角箭头的颜色*/scrollbar-face-color:#000; /*立体滚动条的颜色（包括箭头部分的背景色）*/scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色（左阴影？）*/scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/scrollbar-track-color:#302D30; /*立体滚动条背景颜色*/scrollbar-base-color:#302D30; /*滚动条的基色*/}#commend_list{overflow-y:auto;overflow-x:hidden;height:229px;scrollbar-arrow-color:#f8f9fb; /*三角箭头的颜色*/scrollbar-face-color:#000; /*立体滚动条的颜色（包括箭头部分的背景色）*/scrollbar-3dlight-color:#302D30; /*立体滚动条亮边的颜色*/scrollbar-highlight-color:#302D30; /*滚动条的高亮颜色（左阴影？）*/scrollbar-shadow-color:#302D30; /*立体滚动条阴影的颜色*/scrollbar-darkshadow-color:#302D30; /*立体滚动条外阴影的颜色*/scrollbar-track-color:#f8f9fb; /*立体滚动条背景颜色*/scrollbar-base-color:#302D30; /*滚动条的基色*/}
/*chrome滚动条*/
::-webkit-scrollbar-track-piece{
-webkit-border-radius:0;
}
::-webkit-scrollbar{
width:8px;
height:8px;
}
::-webkit-scrollbar-thumb{
height:50px;

-webkit-border-radius:4px;
outline-offset:-2px;
border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover{
height:50px;

-webkit-border-radius:4px;}

巴特西

[分享] 通过修改CSS自定义chrome滚动条样式

最新文章

热门文章