Question

我正在尝试在添加新内容后使用div滚动到底部（使用追加）

这是主要部分：

$('#textdiv').append('<p>Lorem ipsum dolor sit amet, solet nostrud concludaturque no eam. Ne quod recteque pri. Porro nulla zril mei eu. Eu nibh rebum pri, eu est maiorum menandri, ridens tamquam abhorreant te eum. Ipsum definiebas ad mel.</p>');

$('#textdiv').animate({scrollTop: $('#textdiv').height()}, 1000);

在小提琴中查看/尝试：http://jsfiddle.net/5ucD3/7/

非常马车.. 它不会滚动到底部（只有最初几个附加）。当我向下滚动并添加新内容时，它会向上滚动。有时它根本没有动画。

我如何让它始终工作？我想我必须以某种方式获得正确高度，但不知道如何

Answer 1

我发现了一种有效的方法：

$('#textdiv').animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500);

http://jsfiddle.net/5ucD3/13/

Answer 2

我又迟到了，但这是我的两分钱。

有时，仅使用一个读数来测量动态元素可能会导致错误，因为附加的内容可能很长，或者因为内容的请求（$ .get，$。post，$ .ajax等等）仍然存在在空中。如果追加的字符串来自请求，那么您必须使用回调方法来附加响应。

你能做的最好的事情是将它串起来，因为javascript“应该”解决同步时尚的功能：

$("#textdiv").append('The longest string ever parsed goes here.')
.animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500);

但是你是对的，这种方法往往是错误的，特别是在处理变异足够快的div时。

这就是为什么如果你想要更加确定工作完成，你可以使用Interval：

var scroll_to_bottom = function(element){
    var tries = 0, old_height = new_height = element.height();
    var intervalId = setInterval(function() {
        if( old_height != new_height ){    
            // Env loaded
            clearInterval(intervalId);
            element.animate({ scrollTop: new_height }, 'slow');
        }else if(tries >= 30){
            // Give up and scroll anyway
            clearInterval(intervalId);
            element.animate({ scrollTop: new_height }, 'slow');
        }else{
            new_height = content.height();
            tries++;
        }
    }, 100);
}

$('#textdiv').append('The longest string ever parsed goes here.');
scroll_to_bottom($('#textdiv'));

这种方法无法击败回调或简单的功能排队，但如果您不确切知道追加何时结束，它就能解决问题。

Answer 3

我已编辑并测试了您的代码：

var div = $('#textdiv'),
    height = div.height();

$('#add').on('click', function(){
    div.append('<p>Lorem ipsum dolor sit amet, solet nostrud concludaturque no eam. Ne quod recteque pri. Porro nulla zril mei eu. Eu nibh rebum pri, eu est maiorum menandri, ridens tamquam abhorreant te eum. Ipsum definiebas ad mel.</p>');
    div.animate({scrollTop: height}, 500);
    height += div.height();
});

在jsFiddle中实时试用

将内容附加到div并滚动/动画到底部

3 个答案: