CODEWITHSUNDEEP
javascriptjquerycss
lisovaccaro
lisovaccaro

Reputation: 34016

Jquery .animate() stop scrolling when user scrolls manually?

I have set up a snippet that scrolls a page section into view when it's clicked, the problem is that if the user wants to scroll in the middle of the animation the scroll kinda stutters.

    $( "section" ).click(function(e) {
        $('html,body').animate({ scrollTop: $(this).position().top }, 'slow');
        return false; 
    });

How can I stop the jquery animation if the user scrolls manually?

Upvotes: 46

Views: 45193

Answers (4)

Kevin Lynch
Kevin Lynch

Reputation: 24733

I would do it by detecting user events

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

Here is a good tutorial.

Upvotes: 6

Praxis Ashelin
Praxis Ashelin

Reputation: 5227

Change your function to this:

var page = $("html, body");

$( "section" ).click(function(e) {

   page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
       page.stop();
   });

   page.animate({ scrollTop: $(this).position().top }, 'slow', function(){
       page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
   });

   return false; 
});

This will:

  • Stop the animation if the user scrolls manually (only during the animation)
  • Does not obstruct your normal jQuery animation, such some of the other answers would

Some extra information:

Why are you binding to all of those events? "scroll mousewheel etc..."

There are many different types of scroll events. You can scroll down using your mouse, keyboard, touchscreen, etc. With this we make sure to catch all of them.

What is the use of var page = $("html, body");? Can't I just use $("html, body") everywhere?

If you use the same selector more than once, it's good practice to cache them in a variable. It will be easier to write/use, and has better performance than having the program re-calculate the selector every time.

Where can I find more info on .animate() and .stop()?

You can read the jQuery documentation for .animate() and .stop(). I also recommend reading about animation queue's since .stop() works on this principle.

Upvotes: 126

devnull69
devnull69

Reputation: 16584

Try this

$('html,body').scroll(function() {
    $(this).stop(true, false);
});

It will also remove all other animations from the element's queue, but it won't "jump" to the end of the current scroll animation.

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10388

$("your selector").scroll(function(){
 $('html,body').stop();
});

reference stop

Upvotes: 1

Related Questions