how to make a jQuery selector work throughout the browser window

Question

Hi i'm using the jQuery mousewheel extension

and it uses the following bind

$('html').bind('mousewheel', function(event, delta) {
  window.scrollBy(-120 * delta, 0);
  return false;
}); 

The delta is determined by the mouse wheel movement and the page scrolls horizontally.

All is fine except when you move the cursor on an empty space where there is no text or image, generally no html element then the mousewheel movement is suddenly unresponsive. I'm positive this is because of how the bind is working.

I made an invisible 100% by 100% fixed pos div to test my theory and the scrolling would work perfectly. Though this seems like a hack to me, and i was wondering of the proper implementations of this code.

How can i make this function be called all over the browser page?

Thank you so much!

Update: David took the initiative to make a test page with his code here. Can anyone tell me if it works for you as it does for him? It doesn't work for me, that is i can only scroll the page horizontally only if my pointer is over the red rectangle.

Answer 1

Did you try binding it to the document or window?

$(document).bind('mousewheel', function(event, delta) {
  window.scrollBy(-120 * delta, 0);
  return false;
});