主要ブラウザのmousewheelイベントのスクロール量について

最近、スクロールアニメーションというか、スクロール量に応じてアニメーションが進むようなものを作りたい欲が高まっている(「カッコeK」新型eKカスタム - カッコいい方に、走ってしまえ | MITSUBISHI MOTORS JAPAN)←こういうの

で、html,bodyにoverflow: hiddenをかけてメインコンテンツをposition: fixedにし、mousewheelイベントの値によってアニメーションを進めればいいことはわかったのだが
どうやらブラウザによってmousewheelイベントの実装が違うらしい。なにゆえ
というわけで手っ取り早くchrome、firefox、IE9で調べてみた。safari？知らん

1. chrome

window.addEventListener('mousewheel',function(e){
    console.log(e.wheelDelta);
},false);

これで、下にマウスホイールすると-120が、上にマウスホイールすると120が出力される。勢い良くやろうが静かにやろうが、120が出力される回数が変わるだけで、値は変わらない。

1. IE9

document.attachEvent('onmousewheel',function(e){
    console.log(e.wheelDelta);
});

chromeとほぼ同じ実装でとれる。値もchromeと一緒で、静かにやろうが激しくやろうが、上で120、下で-120だった

1. Firefox

window.addEventListener('DOMMouseScroll',function(e){
    console.log(e.detail);
},false);

問題はこいつ。まずmousewheelイベントがない。あると思ってたわ。なんだそのまどろっこしいイベント名は。プロパティ名も当然のように違うし。で、この状態で上にマウスホイールすると-3、下にマウスホイールすると3が出力される。すごい差。

まとめ
というわけで、マウスホイールをトリガーにアニメーションさせるようなページを実装する場合、Firefoxのe.detailを40倍してchrome、IE9に合わせるか、chrome、IE9を120で割り、Firefoxを3で割って1に正規化してやるかのどっちかがよさそう。後者の方が好き。safari？知らん。