How to temporarily disable jquery.mousewheel

Question

I am making an isotope-based page. The main display scrolls horizontally, and I applied the default mousewheel action using the jquery.mousehweel script . I want to return the default action to the user when I open the article and stop it from scrolling horizontally, but I cannot figure out how to do this.

Here's a jsfiddle link that gives an example:

http://jsfiddle.net/DJVX2/529/

When you click on a field, it becomes very high, but if you use the mouse wheel, it still scrolls the page to the side. I would like the user to scroll vertically only when the drawer is tall.

Thanks for any help!

Note: if your mouse is not above the # container div, you can already use the mouse to scroll horizontally. The problem is that the mouse is above the #makeMeScrollable div that contains all the blocks

Answer 1

You must untie the same function. In your code, you disable another function with a similar size. To use the same function, first define it and save it, and then use the link to this variable in both bind and unbind . See http://jsfiddle.net/DJVX2/530/ for an update to your script showing that this works in your context. The basic idea is this:

 // Define the callback var callback = function(ev) { ... }; // Bind the callback $(selector).bind('event', callback); // Unbind the callback $(selector).unbind('event', callback); 

As with jQuery 1.7 (the newest version at the time of this writing), the preferred method of event binding is to use on and off as follows:

 // Bind the callback $(selector).on('event', callback); // Unbind the callback $(selector).off('event', callback); 

(Note that you can also pass another argument to delegate events. See more details.