失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html5 滑条 插件 jQuery高性能自定义滚动条美化插件

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

时间:2023-02-17 14:59:47

相关推荐

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

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文件。

通过js来初始化

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

(function($){

$(window).load(function(){

$(".content").mCustomScrollbar();

});

})(jQuery);

通过HTML来初始化

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

另外可以通过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

如果觉得《html5 滑条 插件 jQuery高性能自定义滚动条美化插件》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。