Ok if you need the mousewheel you should consider the jquery-mousewheel plugin. There you can bind on the 'mousewheel' event.
The event also comes with deltaX and deltaY information, from which you can deduce whether the mousewheel scrolls up (deltaY > 0) or scrolls down (deltaY < 0).
See it in action with the mousewheel up/down detection
HTML:
<div id="mydiv" style="background: green; width: 400px; height: 400px;">
a div
</div>
JAVASCRIPT:
$('#mydiv').hover(function() {
$(this).data('hover',1); // mouse is over the div
}, function(){
$(this).data('hover',0); // mouse is no longer over the div
});
$(document).mousewheel(function(event, delta, deltaX, deltaY) {
if($('#mydiv').data('hover') == 1 && $(document).attr('alert-on') != 1) {
$(document).attr('alert-on', 1)
if(deltaY > 0) {
alert('wheel scrolls up');
} else {
alert('wheel scrolls down');
}
$(document).attr('alert-on', 0)
}
});
What it does is it sets a flag on your div when the mouse is over, once a mousewheel event is captured it checks whether you are over the <div>
with the mouse, when yes it shows an alert box.
It also sets a flag on the document that the alert box is shown, because the mousewheel event is emitted every time you turn your scrolling wheel a little bit which would result in many alert boxes stacked upon each other.