jquery-custom-scrollbar网页自定义滚动条样式

之前有一个网站项目就是需要像上图一样效果的，很漂亮的自定义滚动条，那时候没找到合适的，智能使用默认的浏览器滚动条，今天看到某个页面上很漂亮的滚动条，就查看了下代码，通过代码上面的名称找到了今天的这个美丽的自定义滚动条jquery-custom-scrollbar。

官方网站：http://manos.malihu.gr/jquery-custom-content-scroller/  英文版本的
官方做了很多的样式参考，上图就是我截取的部分，下面是完整的案例链接地址。
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
jquery-custom-scrollbar使用方法：
首先下载包含插件文件的归档文件（以及大量的HTML演示和示例）。提取和上传jquery.mcustomscrollbar.concat.min.js，jquery.mcustomscrollbar.css和mcsb_buttons.png到您的Web服务器。
html
HTML文档头部标签引用，jquery.mcustomscrollbar.css
<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
请确保网页已经引用了jquery库
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
上面的任意选取一个百度的jquery库
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>
CSS
元素（S）你想添加滚动条（S）应该有一个溢出块，是一个高度典型的CSS属性（或最大高度）值，自动溢出价值（或隐藏）和内容需要足够长的滚动。水平滚动条的元素，应该有一个宽度（或最大宽度）值集。
如果您希望通过JavaScript设置元素的高度和宽度，你可以使用SetHeight / setwidth选项参数。
安装
通过JavaScript初始化
在文件包，叫上你想添加滚动条的元素选择器mcustomscrollbar功能（S）
<script> (function($){ $(window).on("load",function(){ $(".content").mCustomScrollbar(); }); })(jQuery); </script>
初始化通过HTML
添加类mcustomscrollbar任何元素要添加自定义滚动条（S）的默认选项。可选地，通过HTML数据属性数据MCS轴（例如垂直方向的“X”和“y”）和它的主题通过数据MCS主题设置它的轴。例如:
<div class="mCustomScrollbar" data-mcs-theme="dark"> <!-- your content --> </div>
基本配置和选项参数
轴
默认情况下，该脚本将垂直滚动条。添加一个水平或两轴滚动条，调用mcustomscrollbar函数与轴选项设置为“X”或“Y”分别
$(".content").mCustomScrollbar({
axis:"x" // horizontal scrollbar
});
$(".content").mCustomScrollbar({
axis:"yx" // vertical and horizontal scrollbar
});
主题样式
迅速改变滚动条的外观，设置主题选项参数的任何准备使用jquery.mcustomscrollbar.css主题，例如：
$(".content").mCustomScrollbar({
theme:"dark"
});