How does JS determine whether to scroll up or down

How does js determine the scroll up and down, we should have seen this effect, with the mouse scroll wheel to realize a form of numbers scroll up to increase, scroll down to reduce the operation, this effect is achieved through js monitoring of mouse wheel events. Today, I briefly studied how to use javascript to determine whether the mouse is scroll up or down.

First, I have to say that different browsers have different scroll wheel 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, so you need to add event listening in this process. The Code is as follows: compatible with firefox using addEventListener listening.

/* Register the event */if (document. addEventListener) {document. addEventListener ('domainscroll', scrollFunc, false);} // W3Cwindow. onmousewheel = document. onmousewheel = scrollFunc; // IE/Opera/Chrome

In addition, compatibility should be considered when judging the scroll wheel to scroll 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 that they have the same meaning. detail only takes ± 3, and wheelDelta only takes ± 120, where positive numbers represent upward and negative numbers represent downward.
 
The sample code is as follows:

<Label for = "wheelDelta"> scroll value: </label> (IE/Opera) <input type = "text" id = "wheelDelta"/> <label for = "detail"> scroll value: (Firefox) </label> <input type = "text" id = "detail"/> <script type = "text/javascript"> var scrollFunc = function (e) {e = e | window. event; var t1 = document. getElementById ("wheelDelta"); var t2 = document. getElementById ("detail"); if (e. wheelDelta) {// IE/Opera/Chrome t1.value = e. wheelDelta;} else if (e. detail) {// Firefox t2.value = e. detail;}/* Register event */if (document. addEventListener) {document. addEventListener ('domainscroll', scrollFunc, false);} // W3Cwindow. onmousewheel = document. onmousewheel = scrollFunc; // IE/Opera/Chrome </script>

By running the above code, we can get the following results:

In a non-firefox browser, scroll up returns 120, scroll down returns-120
 
In firefox, the value returned by scroll up is-3, and 3 is returned by scroll down.
 
The Code is as follows. e. wheelDelta is used to determine whether it is a non-firefox browser, and e. detail is a firefox browser.

if(e.wheelDelta){//IE/Opera/Chromet1.value=e.wheelDelta;}else if(e.detail){//Firefoxt2.value=e.detail;}

Articles you may be interested in

• How does js determine whether the scroll wheel is scroll down or up?
• Javascript determines whether the mouse is left or right-click-compatible with ie, firefox, chrome, and other major browsers
• Php determines whether the string is full of English, pure Chinese, and a combination of Chinese and English
• JQuery determines whether an element exists
• Js restrictions: Only English letters and numbers can be entered. Chinese characters and other special characters cannot be entered.
• Js determines whether the variable is a number
• Js determines whether a value exists in a js Array
• Do you want to start a business, or do you want to become a sohofamily?