自定义浏览器的滚动条样式(适用webkit内核浏览器)

作为一个小前端，因为比较小，所以对于每一个出现在眼前的页面，只要有亮点，都会习惯性的进行分析，从而让自己也领会到其功能。所以这一次小觉写到自定义浏览器的滚动条样式其实是看到了百度云文章里面的滚动条样式挺有爱的，就查看了下它的代码，所以小觉也就把这功能应用在小觉的博客里了，大家可以玩下小觉博客中的滚动条哦。
下面先给出从百度云文章中出现的滚动条样式(注释由小觉自己添加)：
::-webkit-scrollbar {width: 8px; height: 8px;}/*滚动条大小*/
::-webkit-scrollbar-thumb {background-clip: padding-box;
background-color: #ccc; min-height: 28px; border-radius:
6px;}/*滚动条默认显示样式*/
::-webkit-scrollbar-thumb:hover {background-color:
#ea5449;}/*鼠标移动到滚动条显示样式*/
::-webkit-scrollbar-thumb:active {background-color:
#dd453a;}/*鼠标点击滚动条显示样式*/
::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal
{background-color: transparent;}/*滚动条滚动轨迹横向纵向背景*/
::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal
{border-width: 0; border-style: solid; border-color:
transparent;}/*去除滚动条及其滚动轨迹的边框,小觉个人认为这儿应该可以简化成border: 0 solid
transparent*/
其实小觉对以上代码放进了小觉的博客后都没怎么更改，其中就鼠标移动到滚动条和鼠标点击滚动条的显示样式中更改了颜色，毕竟小觉博客中的按钮以黑色为主，其中以#555~#333之间取色，同时就鼠标移动到滚动条和鼠标点击滚动条的显示颜色的变换上并不需要太明显，所以就去#555和#444。
同时因为网站注重的是内容，而不是滚动条，就其默认样式显示的颜色也是不变的，因为百度云文章上的颜色本身已经很好了，不显眼，却又很清新，既然如此还改什么？
接着就是滚动条的宽度本来小觉想改成12px的，但是改了之后感觉吧，还是小一点好，又改回来了，不排除小觉的强迫症带来的影响。
最后就像小觉在注释上所说的最后一点，边框样式简化了一下。
那么对浏览器滚动条样式的控制代码就只有这些了吗？不，上面只是对百度云文章上应用到的代码进行说明，下面继续说明：
1、::-webkit-scrollbar-button - 滚动条上出现的按钮样式，比如上下按钮
2、::-webkit-scrollbar-track-piece - 除去滚动条外滚动条的滚动轨迹样式
3、::-webkit-scrollbar-corner - 横向和纵向滚动条之间产生的边角样式
4、::-webkit-resizer - 横向和纵向滚动条之间产生的边角上的大小调整工具
5、对滚动条样式进行定义的时候使用背景不仅仅是颜色，同时也可以放入背景图，建议使用png格式的图片及通过以下形式进行添加，当然更多的得看各位看官的审美及素材：
background:#000 url( png-link )
原文链接：http://www.zhugexiaojue.com/note/scrollbar-461.html