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

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

安装

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

bower install malihu-custom-scrollbar-plugin
npm install malihu-custom-scrollbar-plugin

使用方法

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

<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
<script src="jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>
通过js来初始化

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

<script>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>
通过HTML来初始化

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

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

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

基本配置参数

水平或垂直反向配置：

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

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

滚动条主题：

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

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

浏览器兼容

  • Internet Explorer 8+
  • Firefox
  • Chrome
  • Opera
  • Safari
  • iOS
  • Android
  • Windows Phone

更多关于该滚动条美化插件的信息请参考：http://manos.malihu.gr/jquery-custom-content-scroller