Check if div is scrolling to bottom, leave alone if not

Question

I recently developed an interactive chat room. Everything works and is protected for me, but I want the div to be stored in messages to automatically scroll down. I managed to do this using this Javascript:

window.setInterval(function() {
  var elem = document.getElementById('messages');
  elem.scrollTop = elem.scrollHeight;
}, 100);

But at the same time, the user cannot scroll up at all, he always pushes them down to the bottom of the div. I want this to happen if the user is already at the bottom of the div, and then when a new message appears, he scrolls them to the bottom of the div. BUT, if the user is NOT at the bottom of the div, leave them alone until they scroll to the bottom of the div.

Here's the jQuery that updates the div:

window.onload = function(){

            setInterval(function(){
                $.ajax({
                    url: "get.php",
                    type: "GET",
                    success: function(output){
                       $("div#messages").html("<p>" + output + "</p>");

                    }
                });
            }, 500);

        }

Then the div itself is just empty from the start: <div id="messages"></div>

Here is the CSS if you need it:

#messages {
    width: 700px;
    height: 250px;
    border: 2px solid black;
    overflow: auto;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

jQuery Javascript , , .

Answer 1

scrollTop, , scrollHeight offsetHeight . , offsetHeight scrollHeight.

scrollTop scrollHeight , (scrollHeight - offsetHeight).

, :

if (elem.scrollTop >= (elem.scrollHeight - elem.offsetHeight)) {
    elem.scrollTop = elem.scrollHeight;
}

if, elem.scrollTop elem.scrollHeight

Answer 2

, .

window.onload = function(){
    setInterval(function(){
        $.ajax({
          url: "get.php",
          type: "GET",
          success: function(output){

              var elem = document.getElementById('messages');
              var scrollToBottom = false;
              if(elem.scrollTop == elem.scrollHeight){
                   scrollToBottom = true;
              }

              $(elem).html("<p>" + output + "</p>");
              if(scrollToBottom ){
                   elem.scrollTop = elem.scrollHeight;
              }
        });
    }, 500);
}