I can't seem to get jquery new message scroll to work in my code

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.

This may help: http://stackoverflow.com/a/2664878/2655623 Check other answers as well! — Soley, Sep 04 '15 at 18:55
You can animate the scroll which it will be a cool effect too. — Soley, Sep 04 '15 at 18:58

score 1 · Accepted Answer · answered Sep 04 '15 at 20:03

1

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

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

answered Sep 04 '15 at 20:03

afrin216

2,295
1
14
17

Brilliant! Thank you so much! All that pain! – Anna Sep 04 '15 at 21:34

I can't seem to get jquery new message scroll to work in my code

1 Answers1