Stop current scrollTo event when user scrolls

Question

I am using an amended version of http://nick-jonas.github.io/windows/ that allows a user to scroll inside a DIV different sections that will then snap back into place.

Because I am scrolling a DIV I have replaced:

$('.windows').animate({scrollTop: scrollTo }, options.snapSpeed, function(){
                    if(!completeCalled){
                        if(t){clearTimeout(t);}
                        t = null;
                        completeCalled = true;
                        options.onSnapComplete($visibleWindow);
                    }
                });

with:

$('.windows').scrollTo( $visibleWindow , options.snapSpeed, { onAfter:function(){
                    if(!completeCalled){
                        if(t){clearTimeout(t);}
                        t = null;
                        completeCalled = true;
                        options.onSnapComplete($visibleWindow);
                    }
                }});

So as you can see I use the scrollTo plugin to jump to the visible div instead of relying on complex offsets like the previous code.

A bug I have noticed in BOTH the original code and my own is that if the snapping has started and then the user interupts this by scrolling, they will end up fighting with the scroll event to scroll the content. So if the scrollTo is scrolling down 100 pixels and then they try to scroll up 300 pixels using the browser scrollbar, the screen will jutter as the event and browser scroll fight.

Any ideas on how I can stop this? I'm hoping now that I'm using the scrollTo plugin, it will become easier to handle this.

So far I have tried:

$('.windows').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
         $(this).stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup');
    }
});

But this stops the snapping from happening at all... any ideas for a fix?

Answer 1

could you please try

$('.windows').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
     $('.windows').stop(true,false);
}
});

syntax is .stop( [clearQueue ], [ jumpToEnd ] )