Mouse wheel events in javascript detail

/*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


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

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><label for= "Wheeldelta" > Scrolling value:</label> (ie/opera) <input type= "text" id= "WheelDelta"/> </p>


<p><label for= "Detail" > Scrolling value: (Firefox) </label><input type= "text" id= "detail"/></p >


<script type= "Text/javascript" >


var Otxt=document.getelementbyid ("txt");


/***********************


* Function: To judge the rolling direction of the wheel


* Author: walkingp


* Parameter: Event


* Return: Wheel direction 1: Up-1: Down


*************************/


var scrollfunc=function (e) {


var direct=0;


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;


}


Scrolltext (direct);


}


/* Registration Event/*


if (Document.addeventlistener) {


document.addeventlistener (' Dommousescroll ', scrollfunc,false);


}//w3c


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


</script>

Click the Preview effect

Chrome

Firefox

IE (8)

IE (6)

Opera

Safari