jQuery自定义滚动条样式插件mCustomScrollbar

本文深入探讨了基于jQueryUI的mCustomScrollbar插件的使用方法,包括如何引入CSS和JS文件,应用到容器上,设置主题和参数,以及如何进行滚动操作。详细介绍了插件的自定义滚动条功能及其在网页布局中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

mCustomScrollbar是基于jQuery UI的自定义滚动条插件,它可以通过CSS定义网页的滚动条,并且垂直和水平方向的滚动条都可以定义。

使用方法
  • 引入jquery.mCustomScrollbar.css

    <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
  • 加载js文件(注意加载顺序)

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">  </script>
    <script src="jquery.mousewheel.min.js"></script>  //提供滚动支持
    <script src="jquery.mCustomScrollbar.js"></script>
  • 应用mCustomScrollbar

    $(selector).mCustomScrollbar();
  • 加为容器添加内容和样式,自定义滚动条,必须要出现滚动条才可以,所以要对容器加上css来让它出现滚动条,否则是没有效果的。

    width:200px;height:200px;overflow:auto;
主题
  • 使用主题

    $(selector).mCustomScrollbar({
    theme:"minimal-dark"
    });
  • 主题名称

    “light” (default)
    “dark”
    “minimal”
    “minimal-dark”
    “light-2”
    “dark-2”
    “light-3”
    “dark-3”
    “light-thick”
    “dark-thick”
    “light-thin”
    “dark-thin”
    “inset”
    “inset-dark”
    “inset-2”
    “inset-2-dark”
    “inset-3”
    “inset-3-dark”
    “rounded”
    “rounded-dark”
    “rounded-dots”
    “rounded-dots-dark”
    “3d”
    “3d-dark”
    “3d-thick”
    “3d-thick-dark”

参数
$(selector).mCustomScrollbar({
    set_width:false,
    set_height:false,
    horizontalScroll:false,
    scrollInertia:550,
    scrollEasing:"easeOutCirc",
    mouseWheel:"auto",
    autoDraggerLength:true,
    scrollButtons:{
        enable:false,
        scrollType:"continuous",
        scrollSpeed:20,
        scrollAmount:40
    },
    advanced:{
        updateOnBrowserResize:true,
        updateOnContentResize:false,
        autoExpandHorizontalScroll:false,
        autoScrollOnFocus:true
    },
    callbacks:{
        onScrollStart:function(){},
        onScroll:function(){},
        onTotalScroll:function(){},
        onTotalScrollBack:function(){},
        onTotalScrollOffset:0,
        whileScrolling:false,
        whileScrollingInterval:30
    }
});
方法
  • update 当内容变化时更新滚动条
$(selector).mCustomScrollbar("update");
  • scrollTo
$(selector).mCustomScrollbar("scrollTo", position);
//position 可以是字符串(如"#id""bottom")或者是一个数值(以像素为单位)
其余两个额外的选项参数
moveDragger: Boolean
//滚动滚动条的滑块到某个位置像素单位
$(selector).mCustomScrollbar("scrollTo", 200, { moveDragger:true });

callback:Boolean
//执行回调函数 当 scroll-to 完成之后
$(selector).mCustomScrollbar("scrollTo", 200, { callback:true });
  • disable 禁用滚动条
$(selector).mCustomScrollbar("disable", false);
//第二个参数可选,默认值为false;为true,禁用时滚动条回到初始位置。
//调用update()方法使滚动条重新可用
  • destroy
$(selector).mCustomScrollbar("destroy");
//使滚动条恢复默认样式
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值