javascript_javascript スキルでのマウス ホイール イベントの解析

最新のブラウザはすべてマウス ホイールをサポートしており、ユーザーがホイールをスクロールすると起動します。通常、ブラウザはマウス ホイールを使用してドキュメントをスクロールまたはズームしますが、これらのデフォルトのアクションは、マウスホイール イベントをキャンセルすることで防止できます。スクロール ホイール イベントに影響する相互運用性の問題がいくつかありますが、クロスプラットフォーム コードを記述することは可能です。 Firefox を除くすべてのブラウザは「mousewheel」イベントをサポートしていますが、Firefox は「DOMMouseScroll」を使用しており、ドラフト レベル 3 DOM イベント仕様では、「mousewheel」の代わりにイベント名「wheel」を使用することが推奨されています。

document.body.onmousewheel = function(event){
  event = event || window.event;
  console.dir(event);
}

Firefox はマウスホイールをサポートしていません

document.body.addEventListener("DOMMouseScroll",function(event){
  console.dir(event);
})

次のスクロールホイールは下にスクロールしており、Chrome および IE9 でのコンソール出力です

以下は、スクロール ホイールで下にスクロールしたときの Firefox のコンソール出力です

上記の出力から、非標準の DOMMouseScroll イベントを使用してマウスホイールを置き換え、イベント オブジェクトのdetail属性を使用して WheelDetal を置き換えることができます。ただし、detail属性値の拡大縮小率と符号はwheelDetalとは異なり、detail値に-40を乗算した値はwheelDetal値と等しくなります。

FireFox 以外のブラウザでは、上下スクロールは以下の WheelDelta に関係します。

テストによると、私の win7 システムでは、IE7、IE10、Opera12、または safari5.1 に関係なく、下にスクロールするたびに、event.wheelDelta の値は -120 になります。

FireFox ブラウザ (Opera ブラウザでも利用可能) の場合、マウスのスクロール方向を決定する属性は event.detail、スクロールダウン値は 3 です。

FireFoxブラウザの方向判定の正負の値は他のブラウザとは逆になるので注意してください。 FireFox ブラウザでは下にスクロールすると正の値になりますが、他のブラウザでは負の値になります。

var isFirefox = (navigator.userAgent.indexOf("Firefox") !== -1);
if(isFirefox){
  element.addEventListener("DOMMouseScroll",wheelHandler,false);
}
element.onmousewheel = wheelHandler;
//element.onwheel = wheelHandler; //DOM3级wheel事件，经过测试IE9还是不支持，但是谷歌和火狐都支持，在谷歌内有wheelDelta在火狐里面有detail
function wheelHandler(event){ event = event || window.event; var delta = event.wheelDelta || detail*-30; }

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。