How do I bind to the scroll wheel when over a div?

Question

I'm creating an image editor in the browser and I've got the code for all of my controls done. Now I'd like to map hot keys and mouse buttons. the keyboard is easy, but the mouse is not.

I need to detect when the mouse is over the canvas div and when the mouse wheel is moved above it. The mouse over part is not hard, its binding to the mouse wheel that I'm having trouble with. I tried jQuery.scroll but that only seams to work if the div under the wheel is set to scroll itself. My canvas is not. it's offset is controlled via my scripts.

Things to note:

• I'm using jQuery as my base.
• I'm not acually scrolling anything, I'm trying to bind and event to the scroll wheel without actually scrolling.

Structure

<div id="pageWrap">
    [page head stuff...]
    <div id="canvas">
        [the guts of the canvas go here; lots of various stuff...]
    <div>
    [page body and footer stuff...]
</div>

Cheers,

Robert Hurst

Answer 1

Have you tried mousewheel plugin?

http://www.ogonek.net/mousewheel/jquery-demo.html

Answer 2

A very easy implementation would look like:

$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.wheelDelta/120 > 0) {
            $(this).text('scrolling up !');
        }
        else{
            $(this).text('scrolling down !');
        }
    });
});​

http://www.jsfiddle.net/5t2MN/5/