how to detect scrollHeight from div when scroll height change every time?

[ultmt.punisher]

I am creating chat program in php using jquery, ajax and MySQL.
and my problem how to auto scroll down when div is overflowed.

like when user enter new line it will goes down and I want to auto scroll down when new messages appeares down.

and I am trying to do this dynamically using scroll height change to trigger this$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);. because using scroll height chaning it will also scroll to ather users browser who is chating on the other side.

I also have tried to trigger scroll down event using keypress and click event but that is only works for the current users browser, so on the other hand for another user that wont work or wont auto scroll down, he have to scroll manually to view new messages and I dont want that.

so thats why I am trying to use scroll height event. I also tried the mutate plugin for this purpose and it works fine only for the localhost and conflict on the live server and super slow down the chat.

So I have to leave this plugin for this problem.

so please kindly give me the solution without using any plugin to acheive this purpose.

many thanks in advance.

Did you try $(window).scroll() with event handler? Inside the scroll function you can apply the scrollTop() that gets the current vertical position of that element or set the vertical position of the scrollbar for all the elements.

Here's the jQuery api
http://api.jquery.com/scrolltop/

[ultmt.punisher]

with which event hanlder?
will this works without any other event triggered?
means will this works on the other browser if messages comes down?

I have tried many things, and can you give any example of this? please.

here's an example :
Basically, you are applying the scroll function on the global window object in jQuery, the scroll function can take in parameters, in this case it's an event handler.
Yes it will work with other browers without any other plugins.
You can post your entire code if it doesn't work.For the addClass to work, you can create a class in your CSS called "animate" or whatever you like. So once the page scrolls down to a certain height (replace 600 to whatever you want),addClass method will apply that animate class to your div.

$(document).ready(function(){
    $(window).scroll(function(event){
        var scroll=$(this).scrollTop();
        if(scroll >= 600) {
            $("div").addClass("aClass");


        }

    })
})

[ultmt.punisher]

I think you did not understand my question.

I dont want to add any class I want to scroll down it when div is overflowed.

like when new messages coming down and div is overflowed the scrollbar did not scroll down , so I want to scroll it down when div is overflowed its mean that scroll height will also change. so when scroll height is changed it should scroll down.