javascript - jQuery 自定义滚动条插件不随 horizo​​ntalScroll 更新 : true

Question

我正在使用 jquery 插件 jQuery custom content scroller

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

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

请看这个 fiddle : http://jsfiddle.net/Vinyl/2mU7H/1/

但是在水平模式下，我在调用更新方法时遇到了问题。没有内容。

请看这个 fiddle : 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

Fiddle

您忘记了 autoExpandHorizo​​ntalScroll 设置 :)

---

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