問題與鼠標滾輪在jQuery的

Question

我在頭部分以下代碼：

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

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

在Firefox 5沒有任何反應都沒有。在Chrome 13和IE 9中，無論我在哪個方向滾動，我都會得到「NaN速度下降」。

我該如何解決這個問題？我想要做的是檢查用戶是向上滾動還是向下滾動。

感謝您的幫助！

Answer 1

這意味着delta未定義，這可能意味着您沒有包含正確的插件，或者將其包含在錯誤的地方。

不知道你下載了什麼，我現在試着用this和它的working fine。

如果您刪除外部資源，它不會像您的情況那樣工作。

Answer 2

適用於jQuery 1.6.x，但不適用於jQuery 1.7.x
看起來像jQuery中的某些東西。

Answer 3

不能與新的jQuery 2.0.1一起工作......好吧，它可以工作，但不是按需要的。此代碼只能檢測到向下移動（即負值）。我曾嘗試此代碼，結果總是否定：

var num = 0; 

$('#container').bind('mousewheel DOMMouseScroll',function(e, delta) { 
    if(delta > 0) { 
     $("#output").text(++num); 
    } else { 
     $("#output").text(--num); 
    } 

    e.stopPropagation(); 
    e.preventDefault(); 
}); 

的DOMMouseScroll相同mousewheel但適用於Firefox。

修正

我已經在這個post發現了這個新的代碼，現在它的使用jQuery 2.0.1工作在Chrome和Firefox（我有固定的）。問題是返回的值delta未定義。

function extractDelta(e) { 
    if (e.wheelDelta) { 
     return e.wheelDelta; 
    } 

    if (e.originalEvent.detail) { 
     return e.originalEvent.detail * -40; 
    } 

    if (e.originalEvent && e.originalEvent.wheelDelta) { 
     return e.originalEvent.wheelDelta; 
    } 
} 

var num = 0; 

$('#container').bind('mousewheel DOMMouseScroll',function(e) { 
    var d = extractDelta(e); 

    if(d > 0) { 
     $("#output").text(++num); 
    } else { 
     $("#output").text(--num); 
    } 

    e.stopPropagation(); 
    e.preventDefault(); 
}); 

Container和output只是兩個空的div。

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);