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

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 时。

这就是为什么如果您想更加确定工作是否完成，您可以使用间隔：

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 现场试用 ​