经常逛IT类博客的人都知道爱折腾的博主都喜欢搞个性化，喜欢与众不同，其中一个小细节就是网站滚动条。一个个性化的滚动条不但可以跟自己的网站配色搭调，而且可以提高用户体验。看到过Mac或者经常使用Ubuntu的朋友可能会感觉到这两个系统的滚动条比windows可是漂亮多了，这就是我今天要介绍的这个jQuery插件——Custom Scrollbar的原因.
首先在头部head标签中加载CSS：

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

然后在底部body标签前加载js和jQuery（当然已经载入过的就不用加载jquery啦）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

最后在希望出现滚动条的位置加上以下代码：
注意：”.content”这个class预先要有样式，比如max-height、overflow:auto等

<script>
    (function(){(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

默认是出现纵向滚动条的，如果你希望横向滚动条也显示，那么多加上以下代码即可：

$(".content").mCustomScrollbar({
    horizontalScroll:true
});

插件还有很多主题，下面是个light主题的代码，如果需要其他主题，可以把下面代码中的light换成下面列出的其他主题名就行啦

$(".content").mCustomScrollbar({
    theme:"light"
});

主题列表：

light
dark
light-2
dark-2
light-thick
dark-thick
light-thin
dark-thin

主题效果请点这边→https://sell.moe/yr8n

这个插件其他的高级应用就不一一介绍了，想研究的请移步这边→https://sell.moe/jt3u

不过这个插件只能用在正文上，不能改变浏览器的滚动条，于是下面提供了几个自己用过的滚动条CSS3样式：

1：本博用的

/*scroll bar 1*/
::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: #CCC;
min-height: 25px;
border-radius: 10px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #F1F1F1;
}
::-webkit-scrollbar-thumb:hover {
background-color: #A3A3A3;
}

2：

::-webkit-scrollbar-track-piece {
	background-color:#15212F;
	-webkit-border-radius:0
}
::-webkit-scrollbar {
	width:15px;
	height:8px
}
::-webkit-scrollbar-thumb {
	height:50px;
	background-color:#999;
	-webkit-border-radius:8px;
	outline:2px solid #15212F;
	outline-offset:-2px;
	border:2px solid #15212F
}
::-webkit-scrollbar-thumb:hover {
	height:50px;
	background-color:#ffffff;
	-webkit-border-radius:8px
}

3:扁平灰

/*scroll bar 3*/
::-webkit-scrollbar {
	width:13px;
	height:13px;
}
::-webkit-scrollbar-thumb {
	background-color:#C2C2C2;
	background-clip:padding-box;
	border:1px solid #979797;
	min-height:28px;
}
::-webkit-scrollbar-track-piece {
	background-color:whiteSmoke;
	border-left:1px solid #D2D2D2;
}

4:绿色调

::-webkit-scrollbar{ width:10px; margin-right:2px }
::-webkit-scrollbar-track-piece{background-color:#F5F5F5;border-left:1px solid #D2D2D2;}
::-webkit-scrollbar-thumb{ background:#CBCBCB; width:10px }
::-webkit-scrollbar-thumb:hover{ background:#83B724 }

5：橙色调

::-webkit-scrollbar-thumb {
	background-color:#ff6f3d;
	height:50px;
	-webkit-border-radius:2px;
}
::-webkit-scrollbar-thumb:hover {
	background-color:#ff6f3d;
	height:50px;
	-webkit-border-radius:4px;
}
::-webkit-scrollbar {
	width:8px;
	height:8px;
}
::-webkit-scrollbar-track-piece {
	background-color:#fff;
	-webkit-border-radius:2px;
}