mCustomScrollbar的使用

想要实现一个自定义且主题好看的滚动条可以使用slimscroll和mCustomScrollbar、但是前者不能实现同时y轴和x轴，后者就可以，当然，插件越强大相对应的参数就多了，下面介绍一些基本使用。

基本使用

可以先下载或者先看看demo

第一步、加载mCustomScrollbar样式文件`mCustomScrollbar.css`

eg:

第二步、加载必须的js、有两个`jquery`和`jquery.mCustomScrollbar.min.js`还有`mCSB_buttons.png`

jquery是必须的
jquery.mCustomScrollbar.min.js 是插件的主文件
mCSB_buttons.png是插件中各种箭头的精灵图
eg:

第三步、应用mCustomScrollbar

第四步、在页面中添加内容和 mCustomScrollbar 的样式

自定义滚动条的样式，必须要出现滚动条才可以，下面给出一个小demo




    
    滚动条的实现
    
    
    



    
        The element(s) you want to add scrollbar(s) should have the typical CSS properties of an overflowed block which are a height (or max-height) value, an overflow value of auto (or hidden) and content long enough to require scrolling. For horizontal scrollbar, the element should have a width (or max-width) value set.
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set
        the element should have a width (or max-width) value set

显示效果：

demo效果

参数配置

轴

默认情况下，出现的是垂直滚动条。要添加水平或2轴滚动条，要将轴选项设置为"x"或"yx"分别调用mCustomScrollbar函数

$(".content").mCustomScrollbar({
    axis:"x" // 水平滚动条
});

$(".content").mCustomScrollbar({
    axis:"yx" // 水平和垂直滚动条
});

主题

主题的设置可以通过html设置也可以通过Javascript设置

也可以通过JavaScript设置

$(".content").mCustomScrollbar({
    theme:"dark"
});

参数列表

参数	说明
`setWidth: false`	设置你内容的宽度值可以是像素或者百分比
`set_height:false`	设置你内容的高度值可以是像素或者百分比
`axis: "string"`	定义内容的滚动条值可以是 y，x，yx。其中分别为y轴滚动条，x轴滚动，x和y轴滚动条
`scrollbarPosition: "string"`	设置滚动条相对于内容的位置。可用值："inside"，"outside"。 "inside"（默认）使滚动条出现在元素内。 "outside"使滚动条出现在元素之外。请注意，将值设置为"outside"要求您的元素（或父元素）具有CSS position: relative（否则滚动条将与文档的根元素相关）。
`autoHideScrollbar: boolean`	禁用或者启用在不使用滚动条的时候隐藏，设置为true为启用，false为禁用。注意：一些特殊的主题，例如`minimal`会覆盖这个选项
`scrollButtons:{ scrollAmount: boolean }`	`scrollButtons:{enable:true},` true表示显示，false表示不显示
`scrollButtons:{ scrollAmount: "string" }`	`scrollButtons:{scrollType : "stepped"},`stepless表示按住按钮是不断滚动，stepped表示每次点击固定一定的量（可在scrollAmount设置）
`scrollButtons:{ scrollAmount: integer }`	设置滚动量以像素为单位，默认值"auto"根据可滚动内容长度调整滚动量。
`advanced:{ autoExpandHorizontalScroll: true }`	自动扩大水平滚动条的长度值:true,false 设置 true 你可以根据内容的动态变化自动调整大小
`advanced:{ updateOnContentResize: boolean }`	自动根据动态变换的内容调整滚动条的大小值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小建议除非必要不要设置成 true 如果页面中有很多滚动条的时候它有可能会产生额外的移出你可以使用 update 方法来替代这个功能
`advanced:{ updateOnImageLoad: boolean }`	每当元素中的图像完全加载时，会自动更新滚动条。
`advanced:{ updateOnBrowserResize:Boolean }`	根据百分比为自适应布局调整浏览器上滚动条的大小值:true,false 设置 false 如果你的内容块已经被固定大小
`callbacks:{onScroll: function(){}}`	自定义回调函数在滚动中执行

mCustomScrollbar的方法

update

用法：$(selector).mCustomScrollbar("update");
调用 mCustomScrollbar 函数的 update 方法去实时更新滚动条当内容发生变化（例如通过 Javascript 增加或者移除一个对象、通过 ajax 插入一段新内容、隐藏或者显示一个新内容等）

$("#treeDemo").mCustomScrollbar({
            // horizontalScroll:true,//横向滚动
            axis:"yx",
            scrollButtons:{
                enable:true,//设置是否显示按钮
                scrollType : "stepped" //点击按钮不松开时滚动的类型： "stepless"(按钮一直按下时，内容持续滚动)
            },//箭头是否显示
            theme:"3d-dark",            //滚动条主题
            scrollbarPosition:"inside",//滚动线的位置，在容器内部还是外部 inside(default)|outside (如果容器的position是static值，则添加position:relative)
            autoDraggerLength: true,//根据内容区域自动调整滚动条拖块的长度 
            autoExpandScrollbar: true,
            callbacks:{ onScroll:function(){
                console.log("开始滚动了");
            } }
    
        });
        
        $("#treeDemo").mCustomScrollbar("update");// 实时更新滚动条当内容发生变化

scrollTo

用法：$(selector).mCustomScrollbar("scrollTo",position,options);

你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串（例如 “#element-id”，“bottom” 等）描述或者是一个数值（像素单位）。下面的例子将会滚动到最下面的对象.

"bottom" – 滚动到底部（垂直滚动条）
"top" – 滚动到顶部（垂直滚动条）
"right" – 滚动到最右边（水平滚动条）
"left" – 滚动到最左边（水平滚动条）
"first" – 滚动到内容区域中的第一个对象位置
"last" – 滚动到内容区域中的最后一个对象位置
"Integer"-滚动到内容区域中的最后一个对象位置

eg:$(".content").mCustomScrollbar("scrollTo","last");

destroy

用法：$(selector).mCustomScrollbar("stop");
调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式（当希望中断之前的scrollTo方法调用时有用）。

要禁用滚动条并重置其内容位置，请将方法的重置参数设置为true
$(selector).mCustomScrollbar("disable",true);

/* 初始化 */
$(selector).mCustomScrollbar();

/* 禁用滚动条 */
$(selector).mCustomScrollbar("disable");

/* 启用滚动条 */
$(selector).mCustomScrollbar("update");

自定义滚动条主题

定义主题、最简单最快的方式使用插件自带的主题

$(selector).mCustomScrollbar({
  theme:"dark"
});

如果插件带的主题不能满足你的需求，可以自定义主题

创建一个新的主题

$(selector).mCustomScrollbar({
    theme:"my-theme"
});

你的元素将获得类“mCS-my-theme”（你的主题名称带有“mCS”前缀），因此你可以使用.mCS-my-theme规则创建你的CSS 。例如：

.mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: red; }
.mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail{ background-color: white; } 
...