jQuery 自定义滚动条插件不随水平滚动更新：true

Question

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

来源： 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

Fiddle

您忘记了autoExpandHorizontalScroll 设置:)

---

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