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/> 

Когда я нажимаю на Lī элемент веб-страницы containging текст и изображения должны загружаться в #frame_holder div. Это работает правильно. Но после этого обновление полосы прокрутки должно произойти. Этого не происходит. Я могу только нажать еще раз на один и тот же элемент li, а затем mCustomScrollbar пересчитывает и работает нормально. Что я должен сделать, чтобы этот код работал правильно после первого нажатия? Пожалуйста, помогите мне, потому что у меня кончаются идеи.

Answer 1

Кажется, что проблема связана с несколькими вызовами mCustomScrollbar() после каждого загрузчика, не уничтожая его и снова вызывающего обновление.

В идеале вы должны вызвать mCustomScrollbar() сразу после того, как вы покажете модальность, означает, что при нажатии на Roślinność в нижней части страницы. Затем функция возврата загрузчика должна иметь метод обновления.

Сначала избавиться от этой функции: updateScrollbar();

Во-вторых, называют это после Roślinność нажмите: $("#frame_holder").mCustomScrollbar();

В-третьих, обновление полосы прокрутки внутри функции загрузчика: Edit: нагрузки внутри создаваемого контейнером 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'); 
    }); 
}