Question

I’m not sure if this is possible, but I am trying to integrate a facebook-app like feature to my webpage where if you scroll beyond the top of the page it will refresh the page asynchronously.

All I need is a way to use a javasript/jquery/whateverelsewillwork to detect when the user scrolls up, even when the scrollbar is already at the top of the page.

regards,

taylor

Answer 1

If you want to do it, it is possible. All you need to do is to hook into the document’s events and do some special cases checking. It was only tested on Chrome and IE9, I’ll let you do the rest.

If you want, you can use an existing jQuery mousewheel plugin instead to make your life easier. It should be more reliable if the plugin is kept up to date.

$(function(){
    //This variable is used to prevent event flooding
    var preventRefire = false;

    //Bind all possible events
    $(document).bind("DOMMouseScroll mousewheel scroll keyup",function(event){
        //If an event was fired recently, return
        if(preventRefire) return;

        if(event.type == "keyup"){
            //If key is not up arrow or page up, return
            if(event.which != 38 && event.which != 33) return;

            //If an input field is focused, don't fire, return
            if($('input:focus,textarea:focus').length != 0) return;
        }

        if(event.type == "mousewheel" || event.type == "DOMMouseScroll"){
            //Guess scroll direction
            var deltaY = 0;
            if(event.wheelDelta) deltaY = event.wheelDelta;
            if(event.detail) deltaY = -event.detail;

            //If user mousewheeled down, don't fire, return
            if(deltaY <= 0) return;
        }

        //Finally, are we at the top?
        if($(document).scrollTop() == 0){
            //Prevent event to refire within 2 seconds
            preventRefire = true;
            setTimeout(function(){ preventRefire = false; }, 2000);

            //This is where you do your stuff
        }
    });
});

You can try a live demonstration here: http://jsfiddle.net/34p6B/2/

Problems:

It is somewhat reliable, just a couple of things to think about.

It wasn’t tested on a mobile device, but the binding into the scroll event should handle it ok.

Due to event bubbling, mousescroll events will fire on other elements. For example if you have scrolling content in a text area or element AND you’re at the top of the page, it WILL fire if you scroll the inner content up, even though it should not count as an “overscroll” on the document itself. In those cases you can use event.stopPropagation() on the scrolling elements’ mousewheel event to prevent this behaviour.