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 ] )

Answer 2

This answer to another question seems to address your problem. Basically, you simply bind to the scroll , wheel , and other events that might indicate that the user is scrolling, then check to see if the scrolling is being caused by the user. If so, stop the animation.

Here is the function in question (credit to Mottie):

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

Based on my understanding of your problem, you would want to replace $("html,body") and $('body,html') above with $('.windows') , like so:

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

There's a working demo .