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

最新推荐文章于 2021-06-09 16:59:33 发布

原创最新推荐文章于 2021-06-09 16:59:33 发布 · 773 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #滚动条 #css

jquery插件专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了基于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");
//使滚动条恢复默认样式