调整滚动div的高度

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);

如果动画完成动画需要更长的时间，您可以更改间隔。