jquery 鼠标滚轮答案

【问题标题】：jquery mousewheeljquery 鼠标滚轮
【发布时间】：2011-05-15 21:07:00
【问题描述】：

我想用鼠标滚轮 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;
}); 
});

【问题讨论】：

真实答案：stackoverflow.com/questions/8886281/…

标签： jquery mousewheel

【解决方案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/

【讨论】：

为什么在我的浏览器中 Ubuntu 上的 Firefox 和 Chrome 都需要使用它来使其工作:( var delta = e.wheelDelta || -e.detail || e.originalEvent.wheelDelta || -e.originalEvent.detail

【解决方案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 来看看我在做什么；我敢肯定你的不一样！

【讨论】：

抱歉，请参阅上面的编辑。我曾一度将#contentBox 称为媒体，但这也不起作用
我知道这很明显，但是 delta 的 console.log() 和你的 .css.('top', ...) 调用会告诉你问题出在哪里。
另外，这就是实际代码吗？看起来您在 parseint 之后的两个括号之间缺少 $
代码已更新... div 仍然不会用鼠标滚轮滚动
您有机会尝试调试吗？

【解决方案3】：

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

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

然后忘记它。

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

【讨论】：