How to make a floating div consume all mouse scroll events

Question

I have a div that is scrolling vertically. I, however, really want it to consume all mouse scroll events, so that while it is visible and "in focus" I don't want the whole page scrolling while the user is just trying to scroll this sub-section.

Can this be achieved in html/css/js?

I assume a possible strategy would be to add an event listener, listen to mouse scroll events, and when you know you are at the top/bottom to just consume them. Is there an easier way?

Answer 1

Would this jQuery plugin do the trick?

http://www.protofunc.com/scripts/jquery/mwheelIntent/