jquery在鼠标滚动事件上动画水平滚动

Question

我一直在为 mousescroll 事件制作 div 的动画水平偏移。 这是我到目前为止所做的链接，有人可以看到我做错了什么吗？

动画发生在我需要鼠标滚动的点击动作上。 http://jsfiddle.net/laksdesign/WvRR6/

jQuery(document).ready(function($) {

    $(".scroll").click(function(event) {
        event.preventDefault();
        $('#wrapper').animate({ scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left }, 800);
    });

    $('body').bind('mousewheel', function(scroll){
        if(scroll.originalEvent.wheelDelta /120 > 0) {
            scroll.preventDefault();
            $('#wrapper').animate({ scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left }, 800);
        } else{

        }
    });
});

还有一个参考是我基于 mousescroll 制作的动画： http://jsfiddle.net/laksdesign/EATaU/

Answer 1

为了在 jQuery 中捕获mousescroll 事件，您需要使用插件或一些外部函数。我建议使用插件而不是重新发明轮子。请注意，在您提供的参考资料中，小提琴是如何使用 mousewheel.js 文件的 - 这是您需要使用的插件。

有关如何使用插件的更多信息，请参阅this answer

您可以使用的示例插件：

• BrandonAaron.com - 我不能链接到这个网站，所以用谷歌代替。

你会这样使用插件：

// using bind
$('#my_elem').bind('mousewheel', function(event, delta) {
    console.log(delta);
});

正如用户@Dom 在上面的评论中所建议的，另一个广泛使用的插件是：

• jQuery Mousewheel