jQuery 将内容附加到 div 并滚动/动画到底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10776085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Append content to div and scroll/animate to bottom
提问by mowgli
I'm trying to make a div scroll to the bottom after adding new content (using append)
添加新内容后，我试图让 div 滚动到底部（使用附加）
Here is the main part:
这是主要部分：
$('#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);
See/try it in the fiddle: http://jsfiddle.net/5ucD3/7/
在小提琴中查看/尝试：http: //jsfiddle.net/5ucD3/7/
Very buggy.. It does not scroll to the bottom (only maybe at first few appends). When I scroll down and add new content, it scrolls up. Sometimes it does not animate at all.
非常错误..它不会滚动到底部（可能只是在最初的几个附加部分）。当我向下滚动并添加新内容时，它会向上滚动。有时它根本没有动画。
How do I get it to work always? I figure I have to somehow get the correctheight, but don't know how
我如何让它始终工作？我想我必须以某种方式获得正确的高度，但不知道如何
回答by mowgli
I found a way that works:
我找到了一种有效的方法：
$('#textdiv').animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500);
回答by pachanka
I'm late again, but here's my two cents.
我又迟到了，但这是我的两分钱。
Sometimes when measuring dynamic elements using only one reading can be misguiding because the content being appended might be long, or because the request ($.get, $.post, $.ajax, etc...) for content is still in the air. If the string being appended is coming from a request, then you have to use a callback method to append the response.
有时，仅使用一次读数测量动态元素可能会产生误导，因为附加的内容可能很长，或者因为对内容的请求（$.get、$.post、$.ajax 等...）仍在空中. 如果附加的字符串来自请求，那么您必须使用回调方法来附加响应。
The best thing you can do is string it together like this, because javascript "should" resolve the functions synchronous fashion:
你能做的最好的事情就是像这样把它串在一起，因为javascript“应该”解析函数同步方式：
$("#textdiv").append('The longest string ever parsed goes here.')
.animate({scrollTop: $('#textdiv').prop("scrollHeight")}, 500);
But you're right, this method tends to be buggy, especially while dealing with divs that mutate fast enough.
但你是对的，这种方法往往有问题，特别是在处理变化足够快的 div 时。
That's why if you want to be extra sure that the job gets done, you could use an Interval:
这就是为什么如果您想更加确定工作完成，您可以使用 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'));
This method cant beat a callback or a simple function line up, but it solves the problem if you don't know exactly when the append is going to end.
此方法无法击败回调或简单的函数队列，但如果您不知道 append 的确切时间，它可以解决问题。
回答by Nikita Shekhov
I have edited and tested your code:
我已经编辑并测试了您的代码：
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();
});
Try it out live in jsFiddle?
在jsFiddle 中实时试用？
