Prototype Event Extension: Event.wheel(e)
Written by on November 29th, 2006 in Ajax News.
Frank Monnerjahn took the work from here and created a Prototype Event extension which makes it trivial to use the mouse wheel in Prototype with Event.observe(..).
The demo shows this in action.
The Code
/*
* Orginal: http://adomas.org/javascript-mouse-wheel/
* prototype extension by "Frank Monnerjahn" <themonnie @gmail.com>
*/
Object.extend(Event, {
wheel:function (event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) { delta = -event.detail/3; }
return Math.round(delta); //Safari Round
}
});
/*
* enf of extension
*/
var counterSite=0;
function handleSite(e) {
counterSite += Event.wheel(e);
$(’delta’).innerHTML = counterSite +’#'+ Event.wheel(e) + “: ” + (Event.wheel(e) <0 ? ‘down’ : ‘up’ );
}
var counterDIV=0;
function handleDIV(e) {
counterDIV += Event.wheel(e);
$(’divdelta’).innerHTML = counterDIV +’#'+ Event.wheel(e) + “: ” + (Event.wheel(e) <0 ? ‘down’ : ‘up’ );
}
</script>
Usage
Event.observe(document, “DOMMouseScroll”, handleSite, false); // Firefox
Event.observe($(’divdelta’), “mousewheel”, handleDIV, false);
Event.observe($(’divdelta’), “DOMMouseScroll”, handleDIV, false); // Firefox
Of course, taking control of this event could confuse the user, so only do so if it enhances the experience.
Source: Ajaxian
Original Article: http://ajaxian.com/archives/prototype-event-extension-eventwheele