Stop current scrolling when user scrolls

Question

I am using a modified version of http://nick-jonas.imtqy.com/windows/ , which allows the user to scroll inside div sections, which will then be inserted into place.

As I scroll through the DIV, I replaced:

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

from:

 $('.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 go to the visible div, rather than relying on complex offsets like the previous code.

The error that I noticed in BOTH, the source code and my own is that if the binding started and then the user intercepts it by scrolling, they will fight the scrolling case to scroll through the contents. Therefore, if scrollTo scrolls 100 pixels, and then they scroll 300 pixels using the browser scroll bar, the screen will act as an event and combat the browser scroll.

Any ideas on how I can stop this? I hope that now I am using the scrollTo plugin, this will be easier to handle.

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 that stops the binding at all ... any ideas for a fix?

Answer 1

Could you try it?

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

Syntax

: .stop ([clearQueue], [jumpToEnd])

Answer 2

This answer to another question seems to solve your problem. Basically, you just bind to scroll , wheel and other events that might indicate a user scroll, and then check if the user caused the scroll to be triggered. If so, stop the animation.

Here is the feature in question (Motti credit):

 $('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 like to replace $("html,body") and $('body,html') above with $('.windows') , for example:

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

There is a working demonstration .