Here’s how to handle mouse wheel events in prototype, code heavily borrowed from other places on the net, but brought together and made unobtrusive:
/* Mouse Wheel */
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
}
});
SetupMouseWheel = {
initialize: function() {
Event.observe(document, 'dom:loaded', this.setup_mouse_wheel);
},
setup_mouse_wheel: function() {
Event.observe($('element'), "mousewheel", function(e) { SetupMouseWheel.handleDiv(e) }, false);
Event.observe($('element'), "DOMMouseScroll", function(e) { SetupMouseWheel.handleDiv(e) }, false); // Firefox
},
handleDiv: function(e) {
direction = Event.wheel(e) < 0 ? leftSeek : rightSeek;
console.log(direction); //handle scroll
console.log(Event.wheel(e));
direction(); //call leftSeek or rightSeek depending on direction.
}
};
The problem with this code though, and the reason I haven’t found a productive use for this yet is that the browser always scrolls the viewport when it extends beyond screen dimensions. So you have your scroll handler and the browser’s scrolling viewport playing hanky-panky, and it’s not a good sight to see. For applications which always stays within the browser window though, this is useful code.
