jQueryでマウスホイールを使用する

Question

jQuery(function($) { 
$('#myDiv') 
    .bind('mousewheel', function(event, delta) { 
     var dir = delta > 0 ? 'Up' : 'Down', 
     vel = Math.abs(delta); 
     alert(dir + ' at a velocity of ' + vel); 
     return false; 
    }); 
}); 

私はマウスホイールを動かすことに若干の問題があります。 私は私の頭の部分に次のコードを持っている：

<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script> 

は、私は別のWebページから機能をコピーし、アラートを追加しました。しかし、何も起こりません。どうして？私のjQuery初心者の目には見えない明白な間違いがあるかもしれません。

Answer 1

私はJSコンソールに

var delta = 3.45; 
var dir = delta > 0 ? 'Up' : 'Down', 
     vel = Math.abs(delta); 

をテストしようとしたのだが、dirが未定義であることに戻ってきます。次のように変更してみてください：

var delta = 3.45; 
var dir = delta > 0 ? 'Up' : 'Down'; 
var vel = Math.abs(delta); 

これでも動作しない場合は、コンソールにエラーがないかチェックしてください。

Answer 2

jquery-mousewheelプラグインをインストールする必要があると思います。

https://github.com/brandonaaron/jquery-mousewheel/downloads

Answer 3

ここにあなたのコードの作業のjsFiddleです：http://jsfiddle.net/ykv5S/（Firefoxの19.0.2上でテスト）

$('#myDiv') 
    .bind('mousewheel', function(event, delta) { 
     var dir = delta > 0 ? 'Up' : 'Down', 
     vel = Math.abs(delta); 
     alert(dir + ' at a velocity of ' + vel); 
     return false; 
    }); 

jQueryとマウスホイールのプラグインが両方正しくページ

にロードされていることを確認してください

Answer 4

ここにはクロスブラウザソリューションがあります：

var onMouseWheel = function(e) { 
    e = e.originalEvent; 
    var delta = e.wheelDelta>0||e.detail<0?1:-1; 
    alert(delta); 
} 
$("body").bind("mousewheel DOMMouseScroll", onMouseWheel);