StackOverflow ES - ¿como puedo controlar mi scroll de un Chatroom?

Answer to - http://es.stackoverflow.com/q/51099/2089

by Chun

HTML

<div class="messageContainer">
    <div class="nueva_msg">último mensaje</div>
    <div class="nueva_msg">otra mensaje</div>
    <div id="newMessageAnchor"></div>
</div>

CSS

.messageContainer {
    height: 90vh;
    width: 50vw;
    overflow: auto;
}
.nueva_msg {
    height: 50px;
    padding: 10px;
    margin-bottom: 50px;
    border: 1px solid #c1c1c1;
}

JavaScript

$(document).on('DOMNodeInserted', function(e) {
    if ( $(e.target).hasClass('nueva_msg') ) {
        var $newMessage = $('#newMessageAnchor'),
            $msgContainer = $('.messageContainer'),
            $newMessage = $newMessage.position().top + $msgContainer.scrollTop();
        $msgContainer.animate({scrollTop: $newMessage}, 1000);
    }
});

// El código abajo no importa realmente
var addMsgItem = setInterval(function(){
    var numItems = $('.nueva_msg').length;
    $('.nueva_msg').last().after('<div class="nueva_msg">Nueva mensaje!</div>');
    if ( numItems >= 6) {
        clearInterval(addMsgItem);
    }
}, 2000);