jQuery自定义滚动条插件没有't使用水平滚动进行更新:true

jQuery custom scrollbar plugin doesn't update with horizontalScroll: true

本文关键字：滚动 水平 true 更新 插件 滚动条 自定义 jQuery      更新时间：2023-12-18

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

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

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

看看这把小提琴：http://jsfiddle.net/Vinyl/2mU7H/1/

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

看看这把小提琴：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>

Fiddle

您忘记了autoExpandHorizontalScroll设置：）

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