Question

this question is very similar to many other questions posted on stack overflow,I have found about a few solutions that I based my code on but no help with what I’m searching for on, Overstack , yelotofu and a few similar posts … (This is kind of related to another question I’ve posted a few days ago but I’m pretty sure it’s inactive by now since I got my answer so).

So I’ve basically created an ajax chat application and I want the scroll bar of a div to check if it’s at the button and if it is show the message then scroll. I have found 3 main ways to do this(removed one of them because the basics of it were the same as the others)

either:

    if($("#chatscreen")[0].scrollHeight - $("#chatscreen").scrollTop() == $("#chatscreen").outerHeight())
    {
    alert("work");
    }

or

$("#chatscreen").scroll(function(){
    if($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight())
    {
    alert("work");
    }
});​

I have tested the first code on firefox, internet explorer and chrome, it worked great on firefox and internet explorer but not on chrome.

The only real difference between them is $("#chatscreen").scroll(function(){ which basically keeps executing the script when the scrollbar is being used and for some reason this worked while bugging all 3 browsers I have tried making them unusable.

And so I’ve been trying to find a good alternative that could work on both firefox, chrome and internet explorer.

Thank you for any help/advice you can provide.

Answer 1

I figured out why it wasn’t working, on chrome

$("#chatscreen")[0].scrollHeight - $("#chatscreen").scrollTop() == $("#chatscreen").outerHeight()

was false, Still not sure why it works when we added the .scroll() but well the above equation needed to be changed by adding a -1 to the end result to make it work.

Writing this here because it might help someone some day…