Disable mousewheel events

[amanda_]

Hi,

I’m working on a site that has unusual navigation. It is laid out as one big page with 9 sections, and they can only see one section at a time. The user has two options to navigate the site

1. They can mouse back and forth to the next “section” this involves slowly navigating the entire page.
2. They can quickly tween to which ever section they choose via the standard off-canvas menu on the side.

I’ve got it working as it’s supposed to, but it breaks down in one situation – when a user chooses to tween directly to a section and if they use their mouse before the tween has finished. Then things get jumbled and jump all over the place.

Is there a way to disable the event listener?

Thanks!

Here is my very simplified codepen example:
http://codepen.io/ald603/pen/oxRGKE

[GMK Hussain]

add this jQuery code mousewheel will disable.

$('body').bind("mousewheel", function() {
    return false;
});

[amanda_]

Thank you so much for your response, GMK Hussain. It is working as I hoped to disable the mousescroll.

Here’s my followup question – I just want to temporarily disable the mousewheel function, just during the tween.

I have created a function:

function disable(){
   $('body').bind("mousewheel", function() {
    return false;
});
}

which I run onclick on opening the menu, so the tweens occur, no issues of jumping around.

My logic tells me I should be able to create a function that starts the mousewheel functionality back up again, which I created as such:

function enable(){
   $('body').bind("mousewheel", function() {
    return true;
});
}

I’m them calling this function onComplete of the tweens:

$("#campusButton").click(function() {
   menuClose();
   TweenLite.to($row, 2, {
      y: '-100%',
      x: '0%',
      onComplete:function(){
         tl1.seek('slide2');
         enable();
      }
   });
});

This, alas, does not work. Anything pointing in the right direction would be much appreciated!

[Shikkediel]

That’s not really cross browser compatible (and .bind a bit old), I’d go with :

$(window).on('wheel', function() {
    return false;
});

Or for deeper browser support :

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

[Shikkediel]

The other event listener is still in place and “blocking” the return true. Give this a try, removing the event listener :

function disable() {
$(window).on('wheel.impair', function() {
    return false;
});
}

function enable() {
$(window).off('wheel.impair');
}

Using a namespace (impair here) makes it easier to unbind only a particular listener instead of disabling all events …

[amanda_]

HHmm. None of these are altogether working. Thank you for your help so far, still trying to figure this one out.

[Shikkediel]

Maybe take the plain JS route then…

function disable() {
document.removeEventListener('mousewheel', Go);
document.removeEventListener('DOMMouseScroll', Go);
}

function enable() {
document.addEventListener('mousewheel', Go);
document.addEventListener('DOMMouseScroll', Go);
}

[amanda_]

Awesome!!! This works. It makes total sense, now that I look at it.

Thank you!!

[Shikkediel]

Glad that did the trick. :-)

[Author]

Posts