動態高度tinyscrollbar

我真的被困在這一個...動態高度tinyscrollbar

我在div上使用tinyscrollbar.js插件。在該div裏面，我有一個視口，其中包含一個段落和一個按鈕，用於切換500px和1000px之間的段落高度。我如何動態更新tinyscrollbar以注意到新高度並自行更正？（請想象有其他九個「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(); 
    });

來源

2013-04-11 Gidon

請提供一些標記 – 2013-04-11 12:11:27

只是一個想法，如果「tinyscrollbar_update」 &&如果你正確地使用這一切，那麼替代方法是讓父元素克隆前，它初始化tinyscrollbar，然後resize函數，在父元素之後插入原始克隆的克隆，移除父元素，並在新插入的克隆上再次建立tinyscroll。或者使用jQuery的[replaceWith方法]（http://api.jquery.com/replaceWith/） – SpYk3HH 2013-04-11 12:14:00

爲什麼不在切換高度後重新初始化tinyscrollbar？ – 2013-04-11 12:15:11

好了，我到底做的是前手的內容添加和給父母的div一個溢出：隱藏並固定高度以「隱藏」內容。然後點擊我將高度更改爲「自動」。

來源

2013-04-14 08:53:10 Gidon

更新tinyscrollbar時，動畫尚未完成。動畫完成後，使用complete callback function更新tinyscrollbar。

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

來源

2013-05-12 14:38:04 andyace

這是有益的，謝謝！ – 2013-08-29 08:52:45

動態高度tinyscrollbar

回答

相關問題