jquery 鼠标滚轮

发布于 2024-11-07 01:47:41 字数 390 浏览 4 评论 0原文

我想使用 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;
}); 
});

原文

I want to scroll the content of a div with the mousewheel jquery plugin. I have this but its not working. Any thoughts?

$(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;
}); 
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北陌 2024-11-14 01:47:41

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

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

回复收藏 0 原文

念﹏祤嫣 2024-11-14 01:47:41

只是猜测：在 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 来看看我在做什么；我确信你的不一样！

Just a guess : does adding + 'px' to the CSS value fix things? Actually, what does 'media' refer to?

UPDATE

OK, I've had a chance to test your code and it all looks good, presuming you've set the CSS up properly. Have you actually assigned a value for top on #contentBox already? Without an existing value, parseInt($('#contentBox').css('top')) will return NaN. Here's the code that I used:

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

Note that I've used the ternary operator to simplify/reduce the code a bit, but this is just to keep the size of this answer down a bit, and is entirely optional. I've also just used some test CSS there to see what I'm doing; I'm sure yours is different!

回复收藏 0 原文