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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!