Question

I have a chatbox thing on a webpage hooked up to a WebSocket. I was just wondering how I keep the chatbox always scolled to the bottom. I have something that kind of works but it breaks too easily. Take a look here: http://sightofnick.com/public/sub-routine(alpha-24)/public.socket.io.html

Thanks in advance for suggestions.

EDIT:
I guess what I’m asking is, what is the best way to keep the scroll pinned to the bottom?

Answer 1

When you get the height of #display you are probably using .height(), and since there is a scrollbar I can assume you are using overflow: auto?

If this is the case, then .height() will always get the hardcoded value in the CSS, rather than the actual height generated by the content.

In order to fix it use $('#display')[0].scrollHeight instead of $('#display').height() – this will give you the actual height (in px) according to the current content, no matter how you’ve set it in the CSS.

How do I get the real .height() of a overflow: hidden or overflow: scroll div?