Question

I am making a page based on isotope. The main display scrolls horizontally, and I’ve taken the default mousewheel action using the jquery.mousehweel script. I want to give the default action back to the user when an article is opened, and stop it from scrolling horizontally, but I can’t figure out how to do it.

Here’s the jsfiddle link that gives an example:

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

When you click a box, it gets very tall, but if you use the mousewheel it still scrolls the page side to side. I’d like to let the user scroll vertically only while the box is tall.

Thanks for any help!

note: if your mouse is not over the #container div, you will already be able to use the mouse to scroll horizontally. The problem is when the mouse is over the #makeMeScrollable div that contains all the boxes

Answer 1

You have to unbind the exact same function. In your code, you are unbinding a different function with a similar footprint. To use the exact same function, define it first and store it a variable, and then use a reference to that variable in both the bind and the unbind. See http://jsfiddle.net/DJVX2/530/ for an update to your fiddle showing this working 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 of jQuery 1.7 (the newest version at the time of this writing), the preferred method of event binding is to use on and off like this:

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

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

(Note that you can also pass another argument to these to do event delegation. See the docs for more details.