The onmousewheel event of JavaScript

onmousewheel.md

onmousewheel event and Firefox's equivalent

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" ; //FF doesn't recognize mousewheel as of FF3.x
 
if (document.attachEvent) //if IE (and Opera depending on user setting)
    document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')});
else if (document.addEventListener) //WC3 browsers
    document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false);

Wheel Delta value:

<h2>Wheel Delta value: <span id="wheelvalue"></span></h2>

<script type="text/javascript">

function displaywheel(e){
	var evt=window.event || e; //equalize event object
	var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta; //check for detail first so Opera uses that instead of wheelDelta
	document.getElementById("wheelvalue").innerHTML=delta; //delta returns +120 when wheel is scrolled up, -120 when down
}

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x

if (document.attachEvent) //if IE (and Opera depending on user setting)
	document.attachEvent("on"+mousewheelevt, displaywheel);
else if (document.addEventListener) //WC3 browsers
	document.addEventListener(mousewheelevt, displaywheel, false);

</script>

Basic sample

<img id="slideshow" src="summer.jpg" />

<script type="text/javascript">

var myimages=[
	"summer.jpg",
	"spring.jpg",
	"winter.jpg"
];

var slideshow=document.getElementById("slideshow");
var nextslideindex=0;

function rotateimage(e){
	var evt=window.event || e; //equalize event object
	var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta; //delta returns +120 when wheel is scrolled up, -120 when scrolled down
	nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1; //move image index forward or back, depending on whether wheel is scrolled down or up
	nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex; //wrap image index around when it goes beyond lower and upper boundaries
	slideshow.src=myimages[nextslideindex];
	if (evt.preventDefault) //disable default wheel action of scrolling page
		evt.preventDefault();
	else
		return false;

}

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x

if (slideshow.attachEvent) //if IE (and Opera depending on user setting)
	slideshow.attachEvent("on"+mousewheelevt, rotateimage);
else if (slideshow.addEventListener); //WC3 browsers
	slideshow.addEventListener(mousewheelevt, rotateimage, false);

</script>