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

在Tiny Scrollbar网站上，它说当添加新内容时，您需要更新保留容器。 e.g。

//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. 
});

自定义jQuery滚动条

1 个答案: