自定义jQuery滚动条

Question

我正在使用名为Tiny Scrollbar的自定义滚动条插件。滚动条内有手风琴式导航。

我的问题是滚动条不更新导航高度更改时，任何人有任何想法？我在想每个点击都可能有某种形式的Ajax更新，但是我没有Ajax的经验，所以我不知道。这是导航的代码。

<div id="nav-container"> 
    <div class="scrollbar"> 
    <div class="track"> 
     <div class="thumb"> 
     <div class="end"></div> 
     </div> 
    </div> 
    </div> 
<div class="viewport"> 
    <div class="overview"> 
    <nav class="main"> 

    <div class="menu-item"> 
     <h4><a href="#">Inledning</a></h4> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
     </ul> 
    </div> 

    </nav> 
    </div> 
</div> 
</div> 

的jQuery：

$(document).ready(function() { 
var $ul = $('ul'); 

$("h4").click(function() { 
    $("h4").removeClass("menu-selected"); 
    $ul.hide("blind", 1000); 
$(this).toggleClass("menu-selected"); 
    $(this).next().show("blind", 1000); 
}); 

$("li").click(function() { 
    $("li").removeClass("select"); 
    $(this).addClass("select"); 
    }); 
}); 

Answer 1

在微小的滚动条的网站，它说的是，当添加新的内容需要更新保持容器。例如

//The update method can be used for adjusting a scrollbar to its new content. 
var yourScrollBar = $('nav-container'); 
yourScrollBar.tinyscrollbar(); 

//The below function would be called when updating the content. 
yourScrollBar.tinyscrollbar_update(); 

上面的代码是从plugin website.

例如与您的代码的例子。

$("h4").click(function() { 
    $("h4").removeClass("menu-selected"); 
    $ul.hide("blind", 1000); 
    $(this).toggleClass("menu-selected"); 
    $(this).next().show("blind", 1000); 
    yourScrollBar.tinyscrollbar_update(); <-------- Here. 
});