Autoscroll div с jQuery внизу после добавления

у меня есть класс div= 'messages'. Я добавляю дату в этот div через jQuery.добавлять() Вот стили:

.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 . Что я делаю не так? Спасибо!

12
css javascript jquery scroll scrolltop

3 ответов

изменить 

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

to

scrollTop: $("#messages").scrollHeight
8

это решение не сработало для меня, однако, следующее...

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

пожалуйста, попробуйте:

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