Crafty mousewheel cross-browser zoom

This fiddle demonstrates how to handle the mousewheel event across all browsers to zoom in and out on a scene.

HTML

<script src="http://cdn.craftycomponents.com/crafty-dev.js"></script>

JavaScript

Crafty.init(500,500);
// uncomment the following to test Canvas zooming
//Crafty.canvas.init();
Crafty.scene("ExampleGame", function()
{
    Crafty.background("#000");
    //Load a background map
    var worldBkg = Crafty.e("2D, DOM, Image")        
    worldBkg.attr({  w:1280, h:1280, x: 0, y: 0  })
    worldBkg.image("http://opengameart.org/sites/default/files/Arkanos.png", "no-repeat");
    Crafty.viewport.centerOn(worldBkg,0);

     // Implement event chain for mousewheel
     Crafty.extend({
       mouseWheelDispatch: function(e) {
         Crafty.trigger("MouseWheel", e);
       }
     });
     Crafty.bind("MouseWheel", function(e) {
       //equalize event object  
       var evt=window.event || e;
       //check for detail first so Opera uses that instead of wheelDelta  
       var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta; 
       // get sign of delta for scale direction
       if ( delta > 0 )
            scale = 1.1;
       else
            scale = 0.9;
       var pos = Crafty.DOM.translate(evt.clientX, evt.clientY);
         
       Crafty.viewport.zoom(scale, pos.x, pos.y,0);
       //disable default wheel action of scrolling page  
       if (evt.preventDefault) 
        evt.preventDefault()
       else
        return false
    });
    // Firefox handles mousewheel event differently 
    var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";     
    Crafty.addEvent(this, mousewheelevt, Crafty.mouseWheelDispatch);

    // implement basic panning via mouse hold
    Crafty.addEvent(this, Crafty.stage.elem, "mousedown", function(e) {
      if(e.button > 1) return;
      var base = {x: e.clientX, y: e.clientY};
    
        function scroll(e) {
          var dx = base.x - e.clientX,
              dy = base.y - e.clientY;
              base = {x: e.clientX, y: e.clientY};
              Crafty.viewport.x -= dx;
              Crafty.viewport.y -= dy;
           return false
        };
       ...