How can we get the chat messages to scroll up?

JavaScript
1

Hey all,

We are developing a Node.js based Chat and have an issue with the Chat messages displaying OK.
You can see/test the chat here:
http://www.sitesticky.com/chat.php?public=guest

As you see as you type and chat messages get to the bottom of the chat_area the chat_area becomes scrollable which is what we want. However, the messages then get buried under the bottom Fixed div rather than scroll up and be the last visible message. And keep in mind that this is a chat and people at different time will join it with different screen sizes so the solution needs to be local to each user.

So then how can we move the last chat message posted up so that it is visible and does not get buried under the bottom Fixed div?

Thanks,
Dean

2

If you inspect the div you’ll see that it has properties called scrollTop and scrollHeight.
Setting scrollTop to a number greater than zero, scrolls the content area.

How do we know what to set scrollTop to?

When the div is scrolled to the bottom, scrollTop has (in my case) a value of 169 and scrollHeight is 928
The clientHeight is also shown as being 759, and the difference between 928 and 759 is 169.

So when the chat area updates, you can set scrollTop to be scrollHeight - clientHeight

1 Like
3

Very sorry, but do not understand what you are referring to!
There are no scrollTop and scrollHeight values in our CSS at all.

Thanks,

4

That’s because they are not CSS attributes. They are element properties within the DOM itself.

5

Hi,

Just wanted to say that we go this taken care off.
Actually it ended up being based on the scrollTop idea. But with lots of try and test.
But it is looking real good now in this regard :slight_smile:

Thanks

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.