jQuery Mousewheel - several part to scroll

Question

I try to use jQuery Mousewheel for my new website. I didn't encountered any problem to implemante it in my website but this one is a bit specific.

Basically my website shows a bunch of inline pictures, contained in a #main div:
_{(source: casimages.com)}

So the Mousewheel plugin allows you to browse the pictures list horizontally. Up to now, no problem.

But when you open the menu, it opens another horizontal list of (smaller) pictures, contained in a #menu div:
_{(source: casimages.com)}

Of course I want the menu to be scrolled instead of the content if the menu is open.

I thought about putting a 'open' class on to the menu and then to put a test on the mousewheel event:

$('#menu-button').click(function() {
  $('#menu').toggleClass('open');
});

$('body, html, *').mousewheel(function(event, delta) {
  if($('#menu').hasClass('open')) {
    $('#menu').scrollLeft -= (delta * 40);
  } else {
    $('#main').scrollLeft -= (delta * 40);
  }
  event.preventDefault();
});

It doesn't seems to work. Any idea of how I should proceed?

Edit: Here's a JSFiddle: http://jsfiddle.net/69Lmbxtc/12/