Resolving mouse wheel events in JavaScript

This article mainly gives you a detailed introduction of JavaScript in the mouse wheel event, illustrated, very detailed, the need for small partners can refer to.

All modern browsers support the mouse wheel and trigger the time when the user scrolls the wheel. Browsers typically use the mouse wheel to scroll or zoom documents, but you can block these defaults by canceling the MouseWheel event. There are some interoperability issues that affect the wheel event, but coding across the platform can still be done. All browsers except Firefox support the "MouseWheel" event, but Firefox uses "Dommousescroll", while the draft 3 DOM event specification recommends using the event name "wheel" instead of "MouseWheel".

?

1 2 3 4

Document.body.onmousewheel = function (event) {event = event | | window.event; console.dir (event);}

Firefox does not support MouseWheel

?

1 2 3

Document.body.addEventListener ("Dommousescroll", function (event) {Console.dir (event);})

The following rollers scroll down the console output below the chrome and IE9

The following is the scroll wheel down Firefox below the console output

From the above, it is possible to replace mousewheel with nonstandard dommousescroll events, replacing wheeldetal with the detail property of the event object. However, the scaling ratio and the positive and negative symbol for the Detail property value are different from the Wheeldetal,detail value multiplied by-40 and wheeldetal values equal.

In addition to Firefox browser, scrolling up or down is the following Wheeldelta related.

According to the test, in my Win7 system, regardless of IE7, IE10, Opera12, or safari5.1, each scroll down Event.wheeldelta value is-120.

For the Firefox browser (also available in Opera browser), determine the mouse scrolling direction of the property is Event.detail, scroll down the value of 3.

It should be noted that the direction of the Firefox browser to determine the value of the positive and negative and other browsers are the opposite. Firefox browser scrolling down is positive, while other browsers are negative.

?

1 2 3 4 5 6 7

var Isfirefox = (navigator.userAgent.indexOf ("Firefox")!==-1); if (Isfirefox) {Element.addeventlistener ("Dommousescroll", Wheelhandler,false);} Element.onmousewheel = WheelHandler ; Element.onwheel = Wheelhandler; DOM3 level wheel event, after testing IE9 or not support, but Google and Firefox are supported, in Google has wheeldelta inside the Firefox detail function Wheelhandler (event) {event = Event | | window.event; var delta = Event.wheeldelta | | detail*-30; }

The above mentioned is the entire content of this article, I hope you can enjoy.