jQuery高性能自定义滚动条美化插件

　　简要教程
　　malihu是一款高性能的滚动条美化jQuery插件。该滚动条美化插件支持水平和垂直滚动条，支持鼠标滚动，支持键盘滚动和支持移动触摸屏。并且它可以和jQuery UI和Bootatrap完美的结合，相当的强大。它的特点有：

　　支持垂直和水平滚动条
　　可调整滚动的动量
　　支持鼠标滚轮、键盘和移动触摸来移动滚动条
　　预定义主题，并且可以通过CSS来修改主题
　　支持RTL方向
　　提供大量参数来支持滚动条的美化和功能实现
　　提供大量方法来控制滚动条
　　用户自定义回调函数
　　可选择和搜索内容


　　安装
　　可以通过Bower或nmp来安装该滚动条美化插件。

1. bower install malihu-custom-scrollbar-plugin
   
2. npm install malihu-custom-scrollbar-plugin        

复制代码

　　使用方法
　　使用该滚动条美化插件需要引入jQuery和jquery.mCustomScrollbar.concat.min.js以及jquery.mCustomScrollbar.css文件。


　　通过js来初始化
　　可以在页面加载完毕之后使用下面的方法来初始化该插件。

1. <script>
   
2.     (function($){
   
3.         $(window).load(function(){
   
4.             $(".content").mCustomScrollbar();
   
5.         });
   
6.     })(jQuery);
   
7. </script>   

复制代码

　　通过HTML来初始化
　　也可以在HTML中直接初始化该滚动条插件。

1. <div class="mCustomScrollbar" data-mcs-theme="dark">
   
2.   <!-- your content -->
   
3. </div>      

复制代码

　　另外可以通过data-mcs-axis属性来设置是水平还是垂直滚动条，取值为x或y。


　　基本配置参数
　　水平或垂直反向配置：
　　默认情况下该滚动条是垂直方向的滚动条，你可以通过配置参数将它设置为水平滚动条或两个方向上滚动条。

1. $(".content").mCustomScrollbar({
   
2.     axis:"x" // 水平滚动条
   
3. });      

复制代码

1. $(".content").mCustomScrollbar({
   
2.     axis:"yx" // 水平和垂直同时存在的滚动条
   
3. });   

复制代码

　　滚动条主题：
　　你可以通过参数将滚动条的主题设置为任何预定义的主题。

1. $(".content").mCustomScrollbar({
   
2.     theme:"dark"
   
3. });  

复制代码

　　查看演示请点击     下载插件请点击01插件.zip

　　浏览器兼容
　　Internet Explorer 8+
　　Firefox
　　Chrome
　　Opera
　　Safari
　　iOS
　　Android
　　Windows Phone

转载自：http://www.html5cn.org/article-8215-1.html