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

如果动画花费更长时间来完成动画，则可以更改间隔。

调整滚动div的高度

2 个答案: