javascript - 附加后使用jQuery将div自动滚动到底部

Question

我有一个 div class='messages'。我通过 jQuery.append() 将日期添加到此 div 以下是样式：

.messages {
border: 1px solid #dddddd;
padding:10px;
height: 400px;
overflow-x:visible;
overflow-y: scroll;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom:10px;
font-size:14px;
}

对于自动滚动，我使用这样的功能：

receiveMessage = function (name, message, type) {
    //adding new message
    $("#messages").append('<strong>' + name + ": " + '</strong>' + message + '<br>');
    /autoscrolling to the bottom
    $("#messages").animate({
        scrollTop: $("#messages").height()
    }, 300);
}

大约 20 条消息正常滚动，但在“挂起”之后，新消息不会滚动。Chrome 版本 19.0.1084.56 。我做错了什么？谢谢！

Answer 1

改变

scrollTop: $("#messages").height()

到

scrollTop: $("#messages").scrollHeight

Answer 2

该解决方案对我不起作用，但是，以下确实...

$(document).ready(function(){
   $('#chat-scroll').animate({
   scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000); 
 });

Answer 3

请试试：

$(document).ready(function(){
   $('#chat-scroll').animate({scrollTop: $('#chat-scroll')[0].scrollHeight}, 2000);
});