jQuery Tools Scrollable with Mousewheel - scroll ONE position and stop

Question

I am using bind/unbind for mousewheel scrolling, based on this SO response:

Jquery, unbinding mousewheel event, then rebinding it after actions are completed?

<

Answer 1

Take a look at this and see what you think. To start I wouldn't bind to mousewheel because Firefox uses DOMMouseScroll instead. This also uses a different delta handler which is the inverse of the one used by all other browsers. Instead bind to jQuery's scroll event which normalizes the behavior. You can track the last scrolltop position to determine whether user scrolled up or down.

I am kind of making the assumption that you are animating between sections. Is there a callback function you can use to determine whether you should be scrolling? I created a global to track whether elements are currently animating. If so then we don't bother executing the function. Finally, I noticed that the callback for the scroll animation seems to trigger before the final scroll event occurs, so I actually had to use a setTimeout there. I didn't like it, but I couldn't figure out how else to get that callback to work properly.

http://jsfiddle.net/Gj3Qy/

var lastScrollTop = 0;
var isDoingStuff = false;

$(document).scroll(function(event) {
    //abandon 
    if(isDoingStuff) { return; }

    if ($(this).scrollTop() > lastScrollTop) {
        //console.log('down');
        $('.active').removeClass('active').next('div').addClass('active');
        isDoingStuff = true;
        $('html,body').animate( {scrollTop: $('.active').offset().top }, 1000, function() {
            setTimeout(function() {isDoingStuff = false;}, 100);
            console.log('off');
        });
    } else {
        //console.log('up');
    }
    lastScrollTop = $(this).scrollTop();
})