Jquery detect div scroll bar scroll to top

Question

var Height = 600;

    $('#message_container').scroll(function(){
        if ($('#message_container').scrollTop() > Height){
            alert('up');

        }else{
            alert('down');
        }
    });

I have div overflow-y:auto , it fetch out 10 messages per time.

I try to use jquery scroll up to fetch out more message.

div height is 600px; while im testing, it keep alert down even i scroll up , anyone know why?

Here is Fiddle http://jsfiddle.net/asEmz/

Answer 1

from JQuery

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0

so test with 0 demo

$(document).ready(function(){           
    $("#message_container").scrollTop($("#message_container")[0].scrollHeight);

    var Height = 600;

    $('#message_container').scroll(function(){
        if ($('#message_container').scrollTop() == 0){
            $('#status').html('up');
            //alert('up');

        }else{
            $('#status').html('down');
            //alert('down');
        }
    });

});

Answer 2

$(document).ready(function(){           
$("#message_container").scrollTop($("#message_container")[0].scrollHeight);

var Height = 60;

$('#message_container').scroll(function(){
    if ($('#message_container').scrollTop() < Height){
        alert('up');

    }else{
        alert('down');
    }
});

});