JQuery dynamic update div content, jump by scroll position

Question

I have problem which Im not able to solve in past days. I writing simple chat based on PHP + jQuery. I have div with chat content:

<div class="conversation-message-list" onclick="hideEmoticons()">
    <div id="note">New message</div>
    <div class="conversation-content">
        <div class="row">
           MESSAGE
        </div>
     </div>
</div>

With jQuery I call function refreshChat. This selects new messages from mysql and appends to conversation-content like this:

$(".conversation-content").append(data.chat);

Chat window is scrolling when there is many messages. What I need to do is: When is chat window scrolled at bottom (user view last message), new message will appends and will be automatic scrolled to the last message. If user is scrolled up and new message is append, only show message (in my code with id="note") but do not scroll to the last message.

In summary, I need the same function as on FB chat - if you are scrolled up, only warning of new message is shown in chat window. If you chatting and see bottom of chat, new message will shown and scrolled on it.

Im in the vicious circle, I tried to play with $(".conversation-message-list").innerHeight() and $(".conversation-message-list").scrollTop() and $(".conversation-message-list")[0].scrollHeight) but Im not able to do, what i need. Thank you.

Here is example of refreshChat function:

function refreshChat() {
    var id = "'.$convers_id.'";
    var receiver = "'.$system->getFirstName($second_user->full_name).'";
    $.getJSON("'.$system->getDomain().'/ajax/refreshChat.php?id="+id, function(data) {
        if(data.kod != "" && data.kod != " " && data.isNew == "1") {
        // Here I want to implement that function
            $(".conversation-content").append(data.chat);
        }
    }
}

Answer 1

Here is my final and working solution:

    var $chatContainer = $(".conversation-message-list");

    function isScrollAtTheBottom () {
        var scrollTop = $chatContainer.scrollTop();

        return $chatContainer.outerHeight() + Math.ceil(scrollTop) == $chatContainer[0].scrollHeight;
    }

    function refreshChat() {
            var id = "'.$convers_id.'";
            var receiver = "'.$system->getFirstName($second_user->full_name).'";

            $.getJSON("'.$system->getDomain().'/ajax/refreshChat.php?id="+id, function(data) {


                    if(data.chat != "" && data.chat != " " && data.isNew == "1") {

                                if (isScrollAtTheBottom()) {
                                    var scroller = $(".conversation-message-list").getNiceScroll(0);
                                    $(".conversation-content").append(data.chat);
                                    $(".conversation-message-list").getNiceScroll(0).resize(0).doScrollTop($(".conversation-content").height(),-1);
                                }
}

Thanks to @t1m0n, you show me the way how to do.

Answer 2

You can check if user's scroll at the bottom of the chat container when new message is coming and set $(".conversation-message-list").scrollTop() to a large value (or to .scrollTop() value of new message DOM element if you have access to it) to get scroll at the bottom:

var $chatContainer = $('.conversation-message-list');

function isScrollAtTheBottom () {
    var scrollTop = $chatContainer.scrollTop(),
            height = $chatContainer.outerHeight();

    return scrollTop + height >= $chatContainer[0].scrollHeight;
}

function refreshChat() {
    var id = "'.$convers_id.'";
    var receiver = "'.$system->getFirstName($second_user->full_name).'";
    $.getJSON("'.$system->getDomain().'/ajax/refreshChat.php?id="+id, function(data) {
        if(data.kod != "" && data.kod != " " && data.isNew == "1") {
            // Here I want to implement that function
            $(".conversation-content").append(data.chat);

            if (isScrollAtTheBottom()) {
                $chatContainer.scrollTop($chatContainer[0].scrollHeight)
            }
        }
    })
}