マウスホイールイベント

jQueryでのマウスホイールイベントの例です。
前提知識として、

• FireFox以外のブラウザではmousewheelイベントで、FireFoxではDOMMouseScrollイベントでマウスホイールの動きをキャッチできる
• （それぞれどのプロパティでホイール量を取得するかは以下のコードを見てもらうとして）FireFox以外のブラウザでは一回のホイール回数*120が取得できるのに対して、FireFoxではホイール回数*3が返ってくる
• FireFoxとそれ以外ではホイール量の正負が反対

以下がコードです。

jQuery.event.fixHooks.mousewheel = {
  props: jQuery.event.mouseHooks.props,
  filter: function(event, originalEvent){
    event = jQuery.event.mouseHooks.filter(event, originalEvent);
    event.deltaX = (originalEvent.wheelDeltaX === undefined)?0:originalEvent.wheelDeltaX;
    event.deltaY = (originalEvent.wheelDeltaY === undefined)?originalEvent.wheelDelta:originalEvent.wheelDeltaY;
    event.deltaX /= -120;
    event.deltaY /= -120;
    return event;
  }
};
jQuery.event.fixHooks.DOMMouseScroll = {
  props: jQuery.event.mouseHooks.props,
  filter: function(event, originalEvent){
    event = jQuery.event.mouseHooks.filter(event, originalEvent);
    var delta = originalEvent.detail;
    if(originalEvent.axis !== undefined && originalEvent.asix == originalEvent.HORIZONTAL_AXIS){
      event.deltaX = delta;
      event.deltaY = 0;
    } else {
      event.deltaX = 0;
      event.deltaY = delta;
    }
    event.deltaX /= 3;
    event.deltaY /= 3;
    return event;
  }
};
if(window.sidebar){ //if Firefox
  jQuery.event.special.mousewheel = {
    bindType: 'DOMMouseScroll',
    delegateType: 'DOMMouseScroll',
    handle: function(e){
      var handleObj = e.handleObj;
      e.type = handleObj.origType;
      var ret = handleObj.handler.apply(this, arguments);
      e.type = handleObj.type;
      return ret;
    }
  };
}


jQuery.fn.extend('mousewheel', function(data, fn){
  if (fn == null) {
    fn = data;
    data = null;
  }

  return arguments.length > 0 ?
  this.on('mousewheel', null, data, fn) :
  this.trigger('mousewheel');
});

FireFoxのときだけ、bindTypeを使ってmousewheelイベントをDOMMouseScrollに回して、それ以外のブラウザではブラウザから貰うホイール量をいじるだけです。
bindTypeを設定したとき、fixHooksはbindTypeで指定された方のイベントに対して呼ばれることに注意（今の例で言えば、FirefoxではDOMMouseScrollイベントに対してfixHooksが呼ばれる）。
横スクロールは、一部ブラウザでしか対応していないようです（横スクロールできるマウスを持っていないので試せませんでした（笑））

#2012年11月28日　Firefox判定部分を変更、mousewheelメソッド登録部分を修正