malihu 是一款高性能的滚动条美化 jQuery 插件。该滚动条美化插件支持水平和垂直滚动条,支持鼠标滚动,支持键盘滚动和支持移动触摸屏。并且它可以和 jQuery UI 和 Bootatrap 完美的结合,相当的强大。它的特点有:
支持垂直和水平滚动条
可调整滚动的动量
支持鼠标滚轮、键盘和移动触摸来移动滚动条
预定义主题,并且可以通过 CSS 来修改主题
支持 RTL 方向
提供大量参数来支持滚动条的美化和功能实现
提供大量方法来控制滚动条
用户自定义回调函数
可选择和搜索内容
使用该滚动条美化插件需要引入 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>
通过 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"
});
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!