2

I am trying to disable mousewheel on mousewheel event and only enable it after the action is completed.

$(window).on('DOMMouseScroll mousewheel', function (event) {

    //disable mousewhell until the following animation is complete

    $('.box').animate({
        margin: div_offset+'px 0 0 0'
    }, 500);

    //enable mousewhell

    return false;
});

I would also like the code to ignore every scroll after the first one, until the animation is complete. In this particular case, I want the animation to complete only once, even if the user scrolls for more than one tick on mouse wheel. Basically in this case, I want the mouse wheel to be disabled for 500 milliseconds after a single mouse scroll "tick", and not register the remaining "ticks" ever (if the user scrolls for 10 ticks during these 500 milliseconds, I only want one animation, while the rest are ignored). After 500 milliseconds, I want the mousewheel to be enabled once again.

I thank you in advance.

noob
  • 47
  • 6
  • what about removing the scrollbars in your page (make sure page height is same height as viewport) and on scroll start the animation? – Joel Harkes Dec 06 '17 at 12:40
  • If you check out the marked duplicate, the answer uses `complete` which would allow you to also set a variable you can use to actively return early out of your event if successive scroll occur during animation. – Nope Dec 06 '17 at 12:40
  • It's not complete duplicate since he also wants to disable scrolling/scrollwheel in his question – Joel Harkes Dec 06 '17 at 12:41
  • @JoelHarkes I just added that in a comment as well. I think using `complete` is the main fix for this question. Using that OP can use variables to set "state" as well to not process any further requests until done. Or even detach the event at the start of the event and re-attach it ones complete. How that is done is preference I suppose but either way `complete` is the key I believe. – Nope Dec 06 '17 at 12:44
  • Given your main issue is not knowing how to prevent the mousehweel from being processed, I'm reopening this as it is not a duplicate of using complete on animate as requested. – Nope Dec 06 '17 at 13:02
  • Scrollbar is already disabled. Mouse wheel is only used for moving the divs inside a page. I also checked a few other solutions, similar to mine, but they didn't work. – noob Dec 06 '17 at 13:03
  • Then @Fran was right, it is a duplicate you want to see the page he referenced. – Joel Harkes Dec 06 '17 at 13:04

2 Answers2

3

I did originally close this question as a duplicate but was told it only answer half the question. I re-openend it to add a suggested solution for not processing the event again until the animation is done.

Using animate complete as suggested in this SO post

You should be able to do something similar to this:

var animating = false;

$(window).on('DOMMouseScroll mousewheel', function (event) {
    if(animating){
        return false;
    }

   animating = true;

    $('.box').animate({
        margin: div_offset+'px 0 0 0'
    }, 500, function(){
        animating = false;
    });
});
Nope
  • 22,147
  • 7
  • 47
  • 72
0

What you can do is assign the function to the DOM event and then assign an empty function (or 'off' it) in the first line of that code. Then when the animation is complete just re-assign the function to the DOM event. Like so:

function test(event) {
    $(window).off('DOMMouseScroll mousewheel');
    //perform your scroll event
    $('.box').animate({
         margin: div_offset+'px 0 0 0'
    }, 500);
    sleep(500);
    $(window).on('DOMMouseScroll mousewheel',test);
}
$(window).on('DOMMouseScroll mousewheel',test);

This will do the trick but it will hold your JS thread busy, you could also do:

function test(event) {
        $(window).off('DOMMouseScroll mousewheel');
        //perform your scroll event
        $('.box').animate({
             margin: div_offset+'px 0 0 0'
        }, 500);
        setTimeout(500,function() {$(window).on('DOMMouseScroll mousewheel',test(event));});

    }
    $(window).on('DOMMouseScroll mousewheel',test);

And based on Frans answer:

function test(event) {
            $(window).off('DOMMouseScroll mousewheel');
            //perform your scroll event
            $('.box').animate({
                 margin: div_offset+'px 0 0 0'
            }, 500,function() {$(window).on('DOMMouseScroll mousewheel',test);});

        }
    $(window).on('DOMMouseScroll mousewheel',test);
Kickass
  • 1,114
  • 9
  • 16