javascript - Stop current scrollTo event when user scrolls

I am using an amended version of / 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(!pleteCalled){
                        if(t){clearTimeout(t);}
                        t = null;
                        pleteCalled = true;
                        options.onSnapComplete($visibleWindow);
                    }
                });

with:

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

So as you can see I use the scrollTo plugin to jump to the visible div instead of relying on plex 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 bee 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 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(!pleteCalled){
                        if(t){clearTimeout(t);}
                        t = null;
                        pleteCalled = true;
                        options.onSnapComplete($visibleWindow);
                    }
                });

with:

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

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

Any ideas on how I can stop this? I'm hoping now that I'm using the scrollTo plugin, it will bee 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?

Share Improve this question asked Nov 15, 2013 at 14:27 Cameron 28.8k102 gold badges288 silver badges490 bronze badges

I'm not sure if you could do wha tyou want with fullPage.js instead. – 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 Commented Nov 15, 2013 at 14:48
@Alvaro there is no CSS property called scroll. Did you mean overflow? – Pavlo Commented Nov 19, 2013 at 12:31
@Pavlo yeah. sorry :) body,html{ overflow:hidden;} – Alvaro Commented Nov 19, 2013 at 14:41

Add a ment |

2 Answers 2

Sorted by: Reset to default 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 ] )

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Stop current scrollTo event when user scrolls - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)