Javascript listening to scroll wheel events

This article mainly introduces how to listen to the mouse wheel event in javascript. It describes how to use specific examples and considers different browsers. You can refer to the results we have seen, use the scroll wheel to increase or decrease the number in a form, or use the scroll wheel to control the left and right of a button and scroll up or down. These are all implemented through js monitoring of mouse wheel events. Today we will introduce a simple js listener for mouse wheel events.

Different events in different browsers

First, different browsers have different scroll events. There are two main types: onmousewheel (not supported by firefox) and DOMMouseScroll (only supported by firefox). We will not detail these two events here. If you want to know more, please move to: mousewheel) and DOMMouseScroll events.
In addition, you need to add event listening during the operation. The Code is as follows: it is compatible with firefox and listens using addEventListener.

The Code is as follows:

/* Register an event */
If (document. addEventListener ){
Document. addEventListener ('dommousescroll', scrollFunc, false );
} // W3C
Window. onmousewheel = document. onmousewheel = scrollFunc; // IE/Opera/Chrome

Js returns a number to determine the scroll wheel up and down

Compatibility should also be considered when judging the scroll wheel up or down in the browser. In the five browsers (IE, Opera, Safari, Firefox, Chrome), Firefox uses detail, and the other four use wheelDelta; the two values are inconsistent, indicating the same meaning. detail and wheelDelta take only two values, detail take only ± 3, and wheelDelta take only ± 120, where positive numbers represent upward, negative number indicates downward.
The specific code is as follows:

The Code is as follows:

Scroll value:(IE/Opera)
Scroll value: (Firefox)