动态高度tinyscrollbar

Question

我真的被这个卡住了…

我在一个div上使用了tinyscrollbar.js插件。在那个div里面，我有一个viewport，它包含一个段落和一个按钮，可以切换段落的高度在500px和1000px之间。我如何动态更新tinyscrollbar以注意到新的高度并纠正自己?(请想象有另外9个"box_content review"div)

我尝试使用网站建议的tinyscrollbar_update方法，但它似乎不起作用。有人知道吗?

感谢

HTML -

<div id="scrollbar3">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
    <div class="viewport">
    <div class="overview">
    <div class="box_content review">
    <h5 class="reviewTitle">Review title: D90 is the best camera</h5>
    <img src="../../images/gen_rating_5.png" />
    <div class="topCont">
    <img src="../../images/profile.png" />
    <p class="pros">Pros - LightWeight, Quality, Performance, Durable, Reliable  </p>
    <p class="cons">Cons - Expensive, Interchangable Parts </p>
    </div>
    <p class="reviewContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book... &nbsp <span><i><a class="readMore">read more</a></i></span></p>
</div>
</div>
</div>
</div>

Jquery -

$('#scrollbar3').tinyscrollbar({ sizethumb: 45 });
    $(".readMore").toggle(function(){
        $(this).parent().parent().parent().animate({height:530},400);
        $('#scrollbar3').tinyscrollbar_update();
    },function(){
        $(this).parent().parent().parent().animate({height:76},400);
        $('#scrollbar3').tinyscrollbar_update();
    });

Answer 1

好的，所以我最后做的是提前添加内容，并给父div一个overflow:hidden和一个固定的高度来"隐藏"内容。然后点击我改变高度为"自动"。

Answer 2

更新tinyscrollbar时，动画尚未完成。当动画完成时，使用完整的回调函数来更新tinyscrollbar

$(this).parent().parent().parent().animate(
    { height:530 }, 
    400, 
    function() {
        $('#scrollbar3').tinyscrollbar_update();
    }
);