jQuery自定义滚动条插件不会使用horizo​​ntalScroll更新:true

Question

我正在使用jquery插件jQuery自定义内容滚动条

来源:http: //manos.malihu.gr/jquery-custom-content-scroller/

它在垂直模式下工作得很好.我可以调用mCustomScrollbar并调用update方法.

看到这个小提琴:http: //jsfiddle.net/Vinyl/2mU7H/1/

但在水平模式下,当我调用更新方法时,我有一个问题.没有内容.

看到这个小提琴:http: //jsfiddle.net/Vinyl/4CW3p/1/

你知道为什么吗 ？

JS代码:

$(document).ready(function () {
    $("#content").mCustomScrollbar({
        horizontalScroll: true,
        scrollButtons: {
            enable: true
        },
        theme: "dark"
    });
});

$("#button").click(function () {
    $("#content").show();
    $("#content").mCustomScrollbar("update");
});

$("#button_close").click(function () {
    $("#content").hide();
});

CSS代码

#content {
    display:none;
    overflow:hidden;
    text-align:left;
    width:150px;
    height:150px;
    background-color: #666;
    color:#fff;
}

HTML代码

<div id="content">
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<p id="button">Show Content</p>
<p id="button_close">Hide Content</p>

Answer 1

小提琴

你忘了autoExpandHorizontalScroll设置:)

$("#content").mCustomScrollbar({
    horizontalScroll: true,
    scrollButtons: {
        enable: true
    },
    theme: "dark",
    advanced: {
        autoExpandHorizontalScroll: true
    }
});