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?

I'm not sure if you could do wha tyou want with fullPage.js instead. — Alvaro
– Alvaro, Commented Nov 15, 2013 at 14:46
By the way, in order to avoid scrolling with the mouse, using the css body,html{ scroll:hidden;} is the way to proceed. — Alvaro
– Alvaro, Commented Nov 15, 2013 at 14:48
@Alvaro there is no CSS property called scroll. Did you mean overflow? — Pavlo
– Pavlo, Commented Nov 19, 2013 at 12:31

john Smith · Accepted Answer · 2013-11-19 13:32:35Z

15

+100

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

edited Nov 19, 2013 at 13:32

answered Nov 19, 2013 at 12:29

john Smith

18k12 gold badges80 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cameron Over a year ago

Not sure who down voted it or why... but it looks to be working for me!

john Smith Over a year ago

tell me if theres a need to adjust

Community · Accepted Answer · 2017-05-23 10:25:38Z

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.

Collectives™ on Stack Overflow

Stop current scrollTo event when user scrolls

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related