javascript - jQuery mCustomScrollbar 更新错误

Question

这里是问题所在:我将 mCustomScrollbar 与一个 div 一起使用，其上的数据是从另一个 html 文件中动态加载的。

Javascript:

function updateScrollbar()
{
    $("#frame_holder").mCustomScrollbar('update');
}

function loader(name)
{
    //loads the selected file into div.

    var loading = "./rosliny/"+name+".html";
    $("#frame_holder").load(loading, function () 
    { 
        //enable scrollbar
        $("#frame_holder").mCustomScrollbar();
    }); 
}

index.html 文件:

<div id="frame_holder" class="frame_holder"> </div>
<div id="menu_rosliny"><h1>Roślinność</h1>
    <p style="font-family:segoe_ui; font-size:13px; color:white;"> Ogólna charakterystyka</p>
    <p><h1>Drzewa</h1></p>
    <ol style=" cursor:pointer; font-size:13px; color:white; font-family:segoe_ui; text-align:left; paddin:0px; margin:10px; position:relative; top:-10px;">
        <li onclick="loader('brzoza');updateScrollbar();">Brzoza</li>
        <li onclick="loader('buk');updateScrollbar();">Buk</li>
        <li onclick="loader('daglezja');updateScrollbar();">Daglezja</li>
        <li onclick="loader('dab');updateScrollbar();">Dąb</li>
        <li onclick="loader('jodla');updateScrollbar();">Jodła</li>
        <li onclick="loader('klon');updateScrollbar();">Klon</li>
        <li onclick="loader('lipa');updateScrollbar();">Lipa</li>
        <li onclick="loader('modrzew');updateScrollbar();">Modrzew</li>
        <li onclick="loader('sosna');updateScrollbar();">Sosna</li>
        <li onclick="loader('swierk');updateScrollbar();">Świerk</li>
        <li onclick="loader('wiaz');updateScrollbar();">Wiąz</li>
    </ol>

要加载的 HTML 站点:

<div class="container">
    <div class="content">
        <h2>Modrzew europejski <em>(Larix decidua Mill.)</em></h2>
        <p class="rosliny_opis"></p>
        <h2>Ciekawostki</h2>
        <p class="rosliny_opis"></p>
        <p class="rosliny_opis"></p>
        <img id="obr_rosl" src="./images/rosliny/modrzew.png"/>
        <!-- end .content -->
    </div>
  <!-- end .container -->
</div> <br/>

当我点击 li 元素时，一个包含文本和图像的网页应该被加载到 #frame_holder div 中。这工作正常。但是在滚动条更新之后应该发生。那不会发生。我只能再次单击同一个 li 元素，然后 mCustomScrollbar 重新计算并正常工作。 我应该怎么做才能使这段代码在第一次点击后正常工作？请帮助我，因为我没有想法了。

Answer 1

似乎是在每个加载器之后多次调用 mCustomScrollbar() 而不销毁它并再次调用更新时出现问题。

理想情况下，您应该在显示模式后调用一次 mCustomScrollbar()，这意味着当您单击页面底部的 Roślinność 时。加载器函数回退应该有 then update 方法。

首先去掉这个函数:updateScrollbar();

其次，在 Roślinność 点击后调用:$("#frame_holder").mCustomScrollbar();

第三，更新加载器函数中的滚动条:编辑:加载 frame_holder 生成的容器 (.mCSB_container)。

function loader(name)
{
    //loads the selected file into div.

    var loading = "./rosliny/"+name+".html";
    $("#frame_holder .mCSB_container").load(loading, function () 
    { 
        //enable scrollbar
        $("#frame_holder").mCustomScrollbar('update');
    }); 
}