这是问题所在:我将mCustomScrollbar与div结合使用,在该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重新计算并可以正常工作。第一次单击后,我应该怎么做才能使此代码正常工作?请帮帮我,因为我没办法了。
最佳答案
似乎在每个加载程序之后多次调用mCustomScrollbar()
而不破坏它并再次调用更新的问题。
理想情况下,显示模态后应调用mCustomScrollbar()
一次,即单击页面底部的Roślinność。加载器功能回退应具有然后更新的方法。
首先删除此功能: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');
});
}
关于javascript - jQuery mCustomScrollbar更新错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20870955/