JavaScript マウスホイールの値を取得する
Firefox以外でマウスホイールの値を取得するには、「mousewheel」イベントを検知します。ホイールがどの程度、開店したのかは、イベントハンドラに渡されるイベントオブジェクトの「delta」プロパティに入ります。Firefoxでは、マウスホイールが回転すると、「DOMMouseScroll」イベントが発生します。ホィールの回転量は、イベントオブジェクトの「detail」プロパティに入ります。Firefoxでは縦方向、横方向どちらに開店したか示す「axis」プロパティがあります。また、GoogleChromeやSafariなどのWebKit系では、縦方向と横方向の回転量は別々のプロパティに入ります。なお、ブラウザによってはスクロール可能な状態でないと値が取得できない場合があります。
<body>
<script>
window.addEventListener("load" , function(){
var ele = document.getElementsByTagName("output")[0];
//body要素のイベントをキャプチャー
document.body.addEventListener("mousewheel",function(evt){
//回転量を求める
var delta = evt.wheelDelta;
var deltaX = evt.wheelDeltaX;
var deltaY = evt.wheelDeltaY;
ele.innerHTML = "ホイール量：" + delta+"<br>";
ele.innerHTML += "ホイール量X：" + deltaX+"<br>";
ele.innerHTML += "ホイール量Y：" + deltaY+"<br>";
},false);
document.body.addEventListener("DOMMouseScroll",function(evt){
//回転量を求める
var delta = evt.detail;
var deltaY = evt.axis;
ele.innerHTML = "ホイール量：" + delta+"<br>";
ele.innerHTML += "方向：" + axis+"<br>";
},false);
}, false);
</script>
<h1>マウスホィールの値</h1>
<output></output>
</body>Google ChromeやSafariでは、回転量と左右の回転量がそれぞれ別のプロパティに入ります。
