滚动条在使用$selector.html()更新内容后重置

Scroll bar is reset after the content inside is update using $selector.html()

本文关键字：更新 新内容 html selector 滚动条      更新时间：2023-09-26

我想创建一个动态滚动内容。

首先，检索数据并设置内容

    $("#sub_menu li").on("click", function () {
        $("#gallery").html(get_html($(this).attr("id")));
        $("#gallery").css("overflow-y", "scroll");
    });

问题是，放新内容后，如果我不指定溢出y，它没有滚动条，内容只是保持其高度。问题是，如何在更新可滚动div中的内容后更新滚动条?

因为我想使用自定义滚动条插件，但它不工作后的内容更新

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

这是css

#gallery {
    width: 530px;
    float: right;
    height: 660px;
}

这是演示网站，只要试着按"Summer 2016"

kotechweb.com/new_focus/page/inspiration

可能有帮助

$("#sub_menu li").on("click", function () {
       $("#gallery").html(get_html($(this).attr("id"))).promise().done(function(){
            $(this).css("overflow-y", "scroll");
        });
    });

但我想知道为什么你不直接使用overflow-y : auto;并删除$("#gallery").css("overflow-y", "scroll"); 

#gallery {
    width: 530px;
    float: right;
    height: 660px;
    overflow-y : auto; 
}

尝试放入自定义滚动条插件advanced:{ updateOnSelectorChange: true }的选项:

$("#gallery").mCustomScrollbar({
    theme: "3d-thick",
    advanced:{ updateOnSelectorChange: true }
});
相关文章：