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上场呗，懒得写的话，插件呗☺