我似乎无法让jQuery新消息滚动在我的代码中工作

Question

I have looked around at other answers to this but I can't see what i am doing wrong/how I can relate the answers to my question- I apologise in advance if there is a very similar answer out there that I have not used!

So basically I have a basic page and a button that you click to bring up the message bar on the side. This bar works fine(I have tried to simplify it on code pen) but I can't get the scrollable messages section to scroll down to the bottom automatically when I enter a new message, instead I have to scroll down to see my new message.

I have this part:

function displayChatMessage(name, text) {
  $('<li/>').text(text).prepend($('<span/>').text(name+':')).appendTo($('#messagesDiv'));
  $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;

}

Which is from the firebase tutorial. In their messages though the part where the messages is written keeps moving down off the page. I have tried fiddling around this and with my div configuration but I end seem to end up generally with all of my text box off the screen.

Any thoughts much appreciated.

Below is a codepen link I hope will work as I can't get the right parts to work in jsfiddle.

Answer 1

Ok. The problem is you're trying to set scroll height of the wrong element.

Try this instead $('.messages').scrollTop($('.messages').prop('scrollHeight'));