Question

我想用mousewheel jquery插件滚动div的内容。我有这个，但它不起作用。有什么想法吗？

$(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

$('#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/

Answer 2

只是一个猜测：确实在CSS值中添加+'px'修复了什么？实际上，“媒体”指的是什么？

<强>更新

好的，我有机会测试你的代码，一切看起来都不错，假设你已经正确设置了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 3

如果你使用的是jQuery 1.6，你可以写：

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

忘掉它。

显然，你仍然需要CSS来正确地声明#contentBox处于绝对定位和其他所有位置。

jquery鼠标滚轮

3 个答案: