javascript - JAVASCRIPT : マウスホイールの回転

Question

スクロールのないページがあります。

マウスホイールが回転したときにアラートを設定するにはどうすればよいですか?

たとえば、マウス ホイールで要素をオンにすると、次のようになります。

$(document).ready(function(){
  $('#div').mouseWheel(function(){
    alert('test');
  });
});

Answer 1

マウスホイールが必要な場合は、jquery-mousewheel pluginを検討してください。そこで、「マウスホイール」イベントにバインドできます。

このイベントには、deltaX と deltaY の情報も含まれており、そこから、マウスホイールが上にスクロールするか (deltaY > 0)、下にスクロールするか (deltaY < 0) を推測できます。

マウスホイールの上下検出で動作を確認

HTML:

<div id="mydiv" style="background: green; width: 400px; height: 400px;">
    a div
</div>

ジャバスクリプト:

$('#mydiv').hover(function() {
   $(this).data('hover',1); // mouse is over the div
}, function(){
   $(this).data('hover',0); // mouse is no longer over the div
});

$(document).mousewheel(function(event, delta, deltaX, deltaY) {
    if($('#mydiv').data('hover') == 1 && $(document).attr('alert-on') != 1) {
        $(document).attr('alert-on', 1) 
        if(deltaY > 0) {
            alert('wheel scrolls up');
        } else {
            alert('wheel scrolls down');
        }
        $(document).attr('alert-on', 0) 
    }
});

マウスが上にあるときにdivにフラグを設定し、マウスホイールイベントがキャプチャされると、マウスが上にあるかどうかを確認し<div>、はいの場合はアラートボックスを表示します。

また、スクロール ホイールを少し回すたびにマウス ホイール イベントが発行され、多数のアラート ボックスが積み重なって表示されるため、アラート ボックスが表示されているというフラグがドキュメントに設定されます。