jquery: auto scroll page, but allow for mousewheel, still scrolling

Question

I'm trying to create a feature where the user sees a menu that has 5 numbers, 1 - 5. 1 = slowest, and 5 = fastest, when someone clicks one of these numbers the page begins to scroll itself, making it so the person doesn't have to scroll the page. The problem i'm having is that I want to allow the person to still have access to their mousewheel, but when i use the mousewheel while the page is animating, it jerks the page down and then it jerks the page back to where it was and it continues animating but doesn't allow me to scroll down or back up and then animate from the new position i scrolled to with my mousewheel. Right now I have it so if I click the page while its scrolling, it stops, but i'm not including that in the final script, any help? THANKS!

$('html,body').animate({scrollTop: $(target).offset().top},430000) 

$('html,body').click(function(){
  $('html,body').stop()
})

score 1 · Accepted Answer · edited May 23 '17 at 12:07

I tried to accomplish this by tapping into the scroll event, but alas, this event was called repeatedly when the animation was running (should have known better).

I ended up using a jQuery Mousewheel Plugin that is more sensitive to scroll events and can distinguish between scroll and mousewheel, so that you can write something like this:

$(window).bind("mousewheel", function() {
    $("html, body").stop();
});

http://jsfiddle.net/Yuw9R/1/

Scrolling up or down with the wheel should stop the automated scrolling. You might want to add code to re-enable the up/down arrows as well. Here's code you could add to do that:

$(window).bind("keydown", function(event) {
    var keyCode = event.which;
    /* up, down, left, right, or page up or page down */
    if (keyCode === 33 || keyCode == 34 || (keyCode >= 37 && keyCode <= 40)) {
        $("html, body").stop();
    }
});

If you don't want to use a plugin, check out this related thread.

jquery: auto scroll page, but allow for mousewheel, still scrolling

1 Answers1