滚动条美化/自定义滚动条

写在前面：

由于用的是css3，所以只有在支持css3的浏览器下才有效；
目前支持WebKit内核的浏览器（例如chrome，部分手机浏览器）自定义；
如果考虑兼容性，可以使用js处理。

去掉滚动条

::-webkit-scrollbar {
    width: 0;
    height:0;
    /*或者直接写下面的样式*/
    display:none;
}

自定义滚动条

如图：

::-webkit-scrollbar {
    width: 8px;
    padding-right: 4px;
    background-color: green; 
    /*其他样式，比如圆角等*/
}
/*滑块样式*/
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: red; 
}
/*当前窗口失去焦点时的滑块样式*/
::-webkit-scrollbar-thumb:window-inactive {
    background-color: blue;
}

自定义兼容的滚动条

效果如上图（demo下载地址）

1. 给需要scroll的区域加入class名p_scroll；
2. 加入js

<script type="text/javascript">
        $(function() {
            $('.p_scroll').mCustomScrollbar({
                 axis:"y",
                 scrollButtons:{enable:true},
                 // theme:"dark",
                 // theme:"light-thick",
                 // theme:"dark-thin",
                 theme:"3d",
                 // theme:"light-3",
                 // theme:"3d-thick",
                 // theme:"rounded-dark",
                 scrollbarPosition:"inside"
              });
        });
</script>

PS：需要引入的库：jquery，jquery.mCustomScrollbar，jquery.mousewheel（已包含在1链接的项目里）

---

ps:鉴于个人经验有限，所有观点，如有异议，请直接回复讨论（请勿发表攻击言论）。
加入QQ群209952809(需回答问题，答案为csdn)；群聊更快解决问题，更happy。