CSS自定义滚动条样式

今天心情很是不好呐，上午没来上班，钉钉申请通过，人事居然扣除我双倍工资，记过一次。次奥！***屌毛，长话短说，很是郁闷。

-webkit-scrollbar

众所周知，浏览器默认的滚动条样式实在是..不怎么美观，当然，既然不堪入目，那么我们就要去改变它。
css3的强势登场，颠覆了往日js独大浏览器动画效果美观体验等。回到当前，先了解下滚动条。滚动条从外观来看是由两部分组成：1、可以滑动的部分，即为滑块。2、滚动条的轨道，即滑块的轨道，为了明显美观，通常轨道颜色较浅，突出滑块。

滚动条的样式主要有三部分组成：

1、::-webkit-scrollbar   滚动条整体样式；
2、::-webkit-scrollbar-thumb  滑块部分；
3、::-webkit-scrollbar-thumb  轨道部分；

下面就来看一下代码：

<div class="box">
    <div class="scrollbar"></div>
</div>

CSS代码：

    .box{
        width: 150px;
        height: 200px;
        overflow: scroll;
        margin: 100px;
    }
    .scrollbar{
        width: 30px;
        height: 300px;
        margin: 0 auto;

    }

    /*滚动条整体样式*/
    .box::-webkit-scrollbar {
        width: 10px;
        height: 1px;
    }
    /*滚动条滑块*/
    .box::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
    /*滚动条轨道*/
    .box::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
        border-radius: 10px;
        background: #ccc;
    }

看下效果：

屌爆屌爆

ps：内容小于div高度，滚动条会消失，另外，你也可以根据需求，设计各种各样式的滚动条，还可以使用渐变颜色更甚之图片哦，如果页面有多处滚动条，省略类名 id，全局添加

兼容性：

兼容性

可以看到，兼容性总体来说还不错，移动端的话还是不错的，不久的将来，将会普及大地的
如果非要兼容所有的话，js上场呗，懒得写的话，插件呗☺