jquery mousewheel

Question

我想滾動div的內容與mousewheel jquery插件。我有這個，但它不工作。有什麼想法嗎？

$(function() { 
$('#contentBox').bind('mousewheel', function(event, delta) { 
    if (delta > 0) { 
     $('#contentBox').css('top', parseInt($('#contentBox').css('top'))+40); 
    } else { 
     $('#contentBox').css('top', parseInt($('#contentBox').css('top'))-40); 
    } 
    return false; 
}); 
}); 

Answer 1

只是一個猜測：添加+'px'的CSS值修復的東西嗎？其實，'媒體'是指什麼？

UPDATE

OK，我有機會來測試你的代碼，這一切看起來不錯，假設你已經設置的CSS正確。您是否已經爲#contentBox分配了top的值？沒有現有值，parseInt($('#contentBox').css('top'))將返回NaN。下面是我使用的代碼：

$(function() { 
    $('#contentBox').bind('mousewheel', function(event, delta) { 

     $('#contentBox').css('top', parseInt($('#contentBox').css('top')) + (delta > 0 ? 40 : -40)); 

     return false; 
    }); 
}); 

#contentBox { height: 4em; background-color: #eee; border: 1px solid #ccc; position: absolute; top: 100px; width: 200px; } 

<div id="contentBox"></div> 

請注意，我用三元運算符，以簡化/減少代碼了一下，但這只是爲了保持這個答案倒有幾分的大小，完全是可選的。我也在那裏用了一些測試CSS來看看我在做什麼;我相信你們是不同的！

Answer 2

如果您使用jQuery 1.6，你可以寫：

$('#contentBox').css('top','+=40'); 

，並忘掉它。

很明顯，你仍然需要CSS來正確聲明#contentBox處於絕對定位狀態。

Answer 3

$('#contentBox').bind('mousewheel DOMMouseScroll', function(event) { 
    event.preventDefault(); 
    var delta = event.wheelDelta || -event.detail; 
    $(this).css({'top': $(this).position().top + (delta > 0 ? '+=40' : '-=40')}); 
}); 

http://www.adomas.org/javascript-mouse-wheel/