问题在于:我正在使用带有div的mCustomScrollbar,其中数据是从另一个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重新计算并正常工作。 第一次点击后,我该怎么做才能让这段代码正常工作?请帮助我,因为我的想法已经用完了。
答案 0 :(得分:0)
在每个加载器之后多次调用mCustomScrollbar()
而不会破坏它并再次调用更新时,似乎会出现问题。
理想情况下,您应该在显示模式后调用mCustomScrollbar()
一次,这意味着当您点击页面底部的Roślinność时。然后,Loader函数应该具有更新方法。
首先摆脱这个功能: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');
});
}