0

I am trying to create a chat page on my website. One of the important features of this application is that old messages should be pushed up on the chat output area whenever a new message is received.

The user should be able to scroll up to see messages in the chronological order that they were received. I have tried to do this (http://jsfiddle.net/wasingej/rqee378d/). However, I cannot scroll up to see the overflowing content.

This works fine when content is overflowing below my element (http://jsfiddle.net/wasingej/rqee378d/3/).

All that has changed between the two is the bottom property has been changed to top. Why won't my scroll bar appear in the first example?

user3285713
  • 151
  • 6
  • 14

2 Answers2

0

Isn't this much simpler?

http://jsfiddle.net/rqee378d/4/

div.outer
{
    position: relative;
    min-height: 20px;
    overflow-y: scroll;
}

div
{
    position: relative;
}

And adding the text using a prepend.

http://api.jquery.com/prepend/

guergana
  • 374
  • 5
  • 19
  • If you want the last piece of text to show in the viewport. See this: http://stackoverflow.com/questions/3742346/use-jquery-to-scroll-to-the-bottom-of-a-div-with-lots-of-text – guergana Jun 17 '15 at 18:06
  • The problem with this is that all text will appear at the top of the container div. I want text to appear at the bottom of the container div and expand up as I add more text. The scroll bar should appear when text expands above the top of the container div. – user3285713 Jun 18 '15 at 17:00
0

Your scroll bar wont appear in your first example because you are positioning the element using absolute. Please read more about positioning here. Here is a quote:

What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent.

This is why your scrollbar is not appearing. If you make them block elements with a position of static then scrolling would work fine.

crazymatt
  • 3,266
  • 1
  • 25
  • 41