The processing method of mouse wheel event OnMouseWheel in HTML _javascript skill

Wheel events are different browsers will have a little difference, one like Firefox using Dommousescroll, FF can also use the AddEventListener method to bind Dommousescroll events, Other browser wheel events using MouseWheel, I will give you a specific introduction.

Firefox uses Dommousescroll, and other browsers use MouseWheel. When scrolling event triggers Firefox uses the Detail property to capture wheel information, and other browsers use Wheeldelta. I don't know why other vendors and Microsoft are so consistent on this issue. Firefox can bind Dommousescroll events using the AddEventListener method.

Elem.addeventlistener (' Dommousescroll ', Func, false); IE and other mainstream browsers can use the traditional event-binding model. But do not use IE proprietary attachevent method, other mainstream browsers do not recognize this method of Microsoft.

Firefox mouse wheel Scroll Up is-3, scroll down is 3

IE mouse wheel Scroll up is 120, scroll down is-120

Safari mouse wheel Scroll up is 360, scroll down is-360

Opera mouse wheel Scroll up is 120, scroll down is-120

The Chrome mouse wheel scrolls up by 120, scrolling down is-120

Someone has done some tests under safari: "Just a lap, the value is +-0.1, if the scrolling slightly faster (more than a few laps), this value will become larger." This is because the mouse wheel acceleration function is available under Mac OS. Once scrolling, the browser scrolls 1 pixels, scrolling 3 times, and the browser scrolls 30 pixels. He also studied Camino (Gecko's kernel engine): "Like Safari (+-0.3 to +-infinity), while using the same kernel engine as Firefox, the delta value only floats in the +-2.666666, No matter how fast you scroll

In which I tested, ie/opera belong to the same type, use attachevent can add wheel events.

/*ie Registration Event *  
/if (document.attachevent) {  
  document.attachevent (' OnMouseWheel ', scrollfunc);  

Firefox uses AddEventListener to add wheel events

/*firefox Registration Event *  
/if (document.addeventlistener) {  
  document.addeventlistener (' Dommousescroll ', Scrollfunc, FALSE);  

Safari and Chrome are of the same type, you can add events using HTML DOM

Window.onmousewheel=document.onmousewheel=scrollfunc;//ie/opera/chrome

In addition to Firefox, the rest can add events using the HTML DOM, so adding events uses the following methods

/* Registration Event/  
if (document.addeventlistener) {  
  document.addeventlistener (' Dommousescroll ', scrollfunc,false);  
} W3c  

Detail and Wheeldelta

Judge the wheel up or down in the browser also to consider compatibility, now five major browsers (IE, Opera, Safari, Firefox, Chrome) Firefox use detail, the remaining four classes use Wheeldelta; Represents the same meaning, detail and wheeldelta only take two values, detail only fetch ±120 only ±3,wheeldelta, where positive numbers are up, negative numbers are down.

<p style= "border-width:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:8px; List-style:none; Text-indent:2em "><label for=" Wheeldelta "> Scrolling value:</label> (ie/opera) <input type=" text "id=" Wheeldelta "style=" border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; List-style:none "></p> <p style=" border-width:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:8px; List-style:none; Text-indent:2em "><label for=" detail "> Scrolling value: (Firefox) </label><input type=" text "id=" detail "style=" border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; 
  List-style:none "></p> <script type=" Text/javascript "> var otxt = document.getElementById (" txt "); 
    var scrollfunc = function (e) {var direct = 0; EE = 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; 
  } scrolltext (direct); 
  }/* Registration Event/if (Document.addeventlistener) {document.addeventlistener (' dommousescroll ', Scrollfunc, false); }//W3C Window.onmousewheel = Document.onmousewheel = Scrollfunc; Ie/opera/chrome/safari <p></script></p>

The above is a small series for everyone to bring the mouse wheel event OnMouseWheel in the HTML of the whole content of the process, I hope that we support cloud-Habitat Community ~