Inline scrollable divs and mouse wheels

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

== Background ==
I have created a parts list table that does not need to fill the entire
page. The solution has been to put the table within a scrolling div,
allowing me to set the height of the table while keeping the rest of
the page fixex.

== Issue ==
When using a mouse wheel and placing the cursor over the table, the div
will scroll as expected. However, when you reach the top or bottom of
the div's contents, the scroll action reverts back to its parent
object; in this case, the page body itself.

== Desired Result ==
Scrolling to the bottom of the div would cause the mouse wheel action
to be disabled for any other down scrolling, reactivated only when a
scroll up action occurs. The opposite would be expected for reaching
the top of the div.

== Proposed Workaround ==
Apply a JavaScript event handler to the div that prompts the actions in
the "desired results" section above.

Site Timeline