2

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?

nkcmr
  • 10,690
  • 25
  • 63
  • 84
  • What do you mean by "it breaks too easily"? It seems to be working fine... – Joseph Silber Mar 11 '12 at 02:34
  • At one point or another it will just stop scrolling down. I guess what I'm asking is, is what is the best method to keep the scroll pinned to the bottom? – nkcmr Mar 11 '12 at 02:35

1 Answers1

6

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?

Community
  • 1
  • 1
Tony Bogdanov
  • 7,436
  • 10
  • 49
  • 80