垂直对齐聊天页面底部并滚动页面

Question

I am creating a chat application with AJAX and PHP. I have successfully been able to get the chats aligned at the bottom of the div in which chats appear. When new messages are loaded, the messages are succcessfully added to the bottom of the div and using JS I am getting the scroll bar to the bottom to show new message. Just like below:

if(document.getElementById("oldmessages").scrollTopMax)
               {
                   if(document.getElementById("oldmessages").scrollTopMax > document.getElementById("oldmessages").clientHeight)
                   {
                   document.getElementById("oldmessages").scrollTop = document.getElementById("oldmessages").scrollTopMax;
                   }
               }

The problem, is that every time new chat is loaded by ajax request which constantly polls the server, at that time this code is fired and every time the scroll bar comes to bottom. Even if the user might be checking messages above the last messages, it still behaves like this , because I am not sure how to rectify this. Is there a way to help solve this and not let the scroll bar scroll to bottom when user is checking messages above the last message?

Please contribute.

Answer 1

You can use element.scrollTop for get the position of scroll at the time of ajax is fire. if position of scroll bar is not at the bottom than set the position at old position . At first time you can set the position of scroll at the bottom .