調整滾動格的高度

Question

我將兩個腳本組合在一起：滾動條和內容推子。當我交換內容（淡入淡出）時，具有大量內容的div使得滾動div超長。我正在閱讀內容滾動的插件演示（http://manos.malihu.gr/jquery-custom-content-scroller），您可以在加載不同內容時使用$(selector).mCustomScrollbar("update");來使div相應地調整。

我知道代碼需要在我的淡入淡出的腳本中，但在哪裏？這是淡化的腳本，它會去哪裏？

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
(function($) { 
    $.fn.Fader = function() { 
     this.each(function() { 
      $('.clickme').bind('click', function(e) { 
       e.preventDefault(); 
       $("#mediaswap div").fadeOut(); 
       $("#mediaswap div" + $(this).attr('name')).fadeIn(); 
      }) 
     }); 
    } 
})(jQuery); 


$(function() { 
    $('#mediaswap').Fader(); 
}); 
});//]]> 

</script> 

Answer 1

我已經回覆了您對該帖子的評論，但我也在此處撰寫。

既然你淡入/淡出的div，你必須調用Update方法作爲回調至.fadeIn（）函數，因此它更新動畫完成後滾動條：

$("#mediaswap div" + $(this).attr('name')).fadeIn(function(){ 
    $(this).mCustomScrollbar("update"); 
}); 

此外，有一個額外的選項參數時，你最初調用插件，你可以使用，來檢查內容的大小，並自動更新的滾動條，如果它的變化：

$("#mediaswap div").mCustomScrollbar({ 
    advanced:{ updateOnContentResize:true } 
}); 

使用updateOnContentResize選項，取決於你的代碼的其餘部分（在那裏你調用插件），所以我建議使用第一種方法。

Answer 2

我建議檢查div來看看它的使用是這樣的動畫：

var wait = setInterval(function() { 
     if(!$("#mediaswap div").is(":animated")) 
     { 
       clearInterval(wait); 
       //put the code in here because it checks 
        for whether the DIV is currently animated. 
      } 
     }, 200); 

您可以更改的時間間隔，如果它需要動畫較長時間才能完成的動畫。