Determining if a mousewheel roll event occured and determining its direction (forward or backward)

Visit Bug 111647

Instructions: Place the mouse cursor over the cat image. Then roll the mouse wheel forward and backward.

Actual results in MSIE 6, NS 7.0 (rv: 1.0.1 build 20020823) and Mozilla 1.8b2 build 2005032506 under XP Pro SP2: the image dimensions increase (10%) when you roll forward the mousewheel and the image dimensions decrease (10%) when you roll backward the mousewheel.

Explanations: MSIE 6 stores direction of rolling in the wheelDelta property while Mozilla-based browsers store this indirectly in the detail property (-32768 or +32768 if "Roll the wheel one notch to scroll: One screen at a time" was checked. ±32768 are event constants SCROLL_PAGE_UP and SCROLL_PAGE_DOWN; otherwise, evt.detail will be ±number of lines in "Roll the wheel one notch to scroll: The following number of lines at a time", this number of lines being reliable when less than 25.). You can verify this yourself by examining carefully the event properties generated in this page.

Mozart playing chess

Other related webpage: Interactive DOM 3 Events wheel (rolling) event properties webpage

Valid HTML 4.01! Valid CSS!