Home > Developer > JavaScript
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <ptml> <pead> <title> Mouse Wheel Data </title> <meta http -equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <style>. slider {width: 50px; height: 180px; background: # eee; padding: 10px 0; cursor: n-resize ;}. slider-slot {width: 16px; margin: 0 auto; height: 180px; background: # eee; border: 1px solid gray; border-color: #999 white #999; position: relative ;}. slider-trigger {width: 14px; height: 18px; font: 1px/0 arial; border: 1px solid gray; border-color: white #999 #999 white; background: # ccc; position: absolute ;}. slider-trigger B {display: block; margin: 1px 3px; border-top: 1px solid #999; border-bottom: 1px solid white ;} </style> </pead> <body> increase/decrease value in the text box <input type = "text" id = "txt" value = "1440"/> scroll after the text box gets the focus scroll scroll wheel mouse zoom picture scroll control slider movement <strong> </strong> <strong> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Let's take a look at the compatibility of various browsers.
IE 6, 7, 8
Register an event using onmousewheel
Use event. wheelDelta to get the scroll Value
Rolling step 120
Downward is a negative value and upward is a positive value
When the mouse is in the same coordinate and the scroll wheel is continuously rolled, The wheelDelta increments by step.
(For example,-240-360)
Firefox 3.5
Two register mousepixelscroll and DOMMouseScroll events are registered, but they cannot be registered using the element. onDOMMouseScroll method. You must use addEventLinstener to listen to events.
Firefox does not have event. wheelDelta. It uses event. detail to obtain the scrolling information (Firefox does this strangely)
Event. detail is used to record how many times an event is executed in the same place (when the mouse coordinates remain unchanged ).
When a DOMMouseScroll event occurs, its values are usually 3 and-3.
However, the value is the opposite of IE, and the value is negative in the upward direction and positive in the downward direction (this problem needs to be unified in the Code)
Why is the value usually 3 and-3, because when you press ctrl, alt, shift and move the scroll wheel, the value of detail becomes 1 and-1
When you press another key, the positive value sometimes changes to 6.
In a word, it seems a bit messy to me,
MozMousePixelScroll: According to Mozilla, events are almost the same as those of DOMMouseScroll, but they are more accurate (to pixels)
However, the detail value returned for this event is very strange. The default values are 51 and-51. Press ctrl, alt, and shift to +-17. @ _ @, so it is gorgeous and we don't plan to use it.
Chrome is consistent with IE, but it takes into account the horizontal scroll wheel device, so two more mouse to get the value respectively
Event onmousewheel
WheelDelta {number}
WheelDeltaX {number}
WheelDeltaY {number}
This time Opera is also a set builder, with both the detail value and the 3,-3, and the wheelDelta value, but the performance is quite consistent.
Event onmousewheel
Detail = {number}
WheelDelta = {number}
We should choose one event. detail, IE, and other supported event. wheelDelta values supported by Firefox, and then make the other one unified by computation,
But we can only use these values to know whether to roll up or down,
Therefore, for convenience, we do not take both of them, and unify them into + 1 and-1 through computation (this is also for the convenience of calculation in practical application );
For IE and Chrome, simply divide it by 120.
Opera supports both wheelDelta and detail, but detail does not support increasing at the same position of wheelDelta.
First, we should first determine whether or not the wheelDelta exists. If so, we will use the wheelDelta. If not, we will use the detail.
Due to keyboard interference of firefox, we also need to Filter detail.
First, perform the modulo operation value % 3 with this value and 3.
If the return value is a multiple of 3 and the return value is 0, we will divide the value by 3 and return the result (ensure that the returned value is + 1-1)
If the returned value is not 0, it indicates that the value is-1 if it is not 1.
Finally, because the rule for returning values from Firefox is to be positive and negative to be positive, different from the usual habits, we need to reverse the positive and negative, and the method is also very simple, add a negative number before the calculation result.
In other words, firefox is a bit stuffy with support for wheel events.
Well, I have analyzed a lot of data. In fact, the code is just a few words:
Copy codeThe Code is as follows:
Function getWheelValue (e)
{
E = e | event;
Return (e. wheelDelta? E. Maid/120:-(e. detail % 3 = 0? E. detail: e. detail/3 ));
}
Finally, let's talk about future roller events and APIs.
In DOM3 Event
Roller events become more complex (more things are also supported)
The registration event has not changed. It is still called mousewheel.
Two wheel event objects are added.
MouseWheelEvent
WheelEvents
It also supports three axial roller values, x, y, and z (really complicated >_<)
If you are interested, take a look here.
Http://www.w3.org/TR/DOM-Level-3-Events/#events-mousewheelevents
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
