I'm building a custom web chat application, and while I have
the basics worked out, I've been wondering if this was possible... right now,
the chat comes in at
the top of
the div, and when it reaches
the bottom,
the div starts scrolling. This works. This is great. But I was wondering if it was possible to create it more like an IRC client, where
the chat comes in initially at
the bottom of
the div, then each new line comes in below
the old ones, etc, and again, when
the div is full, it starts scrolling.
I've managed to get part of this working: I can get it displaying this way. But I can't find a way to scroll it; either
the scroll doesn't appear (when there's no overflow on
the inner, text div, despite there being an overflow on
the outer, container div), or it's confined to
the width of
the text rather than
the width of
the container div.
Some options I've tried:
<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: auto; position: absolute; bottom: 0;"></div></div>
This has
the text appear properly at
the bottom, but no scrollbar
ever appears.
<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: scroll; position: absolute; bottom: 0;"></div></div>
This has
the text appear properly at
the bottom, and a scrollbar appears, but it's only
ever as wide as
the text, even if width=100%... and when
the text reaches
the top,
the scrollbar remains gray.
Basically, do I want
the scrollbar on
the inner or
the container div, is this even possible, how do I force it to work, and am I going about this entirely wrong?
