Chat box scroll to bottom

Question

I have found a solution here on Stackoverflow but I can't get it working

...
<div class="panel-body">
    <ul id="mtchat" class="chat">

    </ul>
</div>
...

And here the js it adds the new <li> but scrolling doesn't work

worker();

function worker() {

  // ajax request deleted

  updateChat();
  setTimeout(worker, 1000);

};

function updateChat() {

  $('#mtchat').append('<li class="right clearfix">Hallo</li>');

  var height = $('#mtchat')[0].scrollHeight;
  var dheight = $('#mtchat').height();
  var scrolling = height - dheight;
  $('#mtchat').scrollTop(scrolling);
  console.log('height:'+height);
  console.log('dheight:'+dheight);

}

In the console, I can see scrollHeight and Height is always the same even if the overflow starts.

I have made a JsBin

Answer 1

Check this jsfiddle

In here, worker() method is only been called once and this in return just sets up the stuff for us:

• Adding one "Hallo" as welcome message, only once
• Assigning the handler for button click
• Timer for updating the chat box

Code :

function worker() {

  $('#mtchat').append('<li class="right clearfix">Hallo</li>');
  // ajax request deleted
  setTimeout(updateChat(), 1000);
  $("#btn-chat").on("click", function(){
    var text = $('#btn-input');
    $('#mtchat').append('<li class="right clearfix">'+ text.val() +'</li>');
    text.val('');
  });
};

function updateChat() {
  var height = document.getElementById('mtchat').scrollHeight; - $('#mtchat').height(); 
  $('#mtchat').scrollTop(height);
}

Answer 2

Your JS Bin does not include the jquery library in the head.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>

Include the above within the head tag

Also the following line should be fixed as below:

var height = document.getElementById('mtchat').scrollHeight; - $('#mtchat').height();

to

var height = $('#mtchat')[0].scrollHeight - $('#mtchat').height();

$('#mtchat')[0].scrollHeight is jquery way of writing document.getElementById('mtchat').scrollHeight

Since you are using jquery everywhere else.

Answer 3

I've figured out now. .panel-body was intended to overflow but I checked the scrollHeight of the <ul> in the div.panel-body .