jquery:自动滚动页面，但允许鼠标滚轮，仍然滚动

Question

我正在尝试创建一个功能，让用户看到一个有5个数字的菜单，1-5.1=最慢，5=最快，当有人点击其中一个数字时，页面开始自动滚动，这样用户就不必滚动页面了。我遇到的问题是，我想让用户仍然可以访问他们的鼠标滚轮，但当我在页面处于动画状态时使用鼠标滚轮时，它会将页面向下推，然后将页面推回原来的位置，并继续进行动画操作，但不允许我向下或向上滚动，然后从我用鼠标滚轮滚动到的新位置进行动画。现在我有了它，所以如果我在页面滚动时单击它，它会停止，但我没有在最后的脚本中包含它，有帮助吗？谢谢!

$('html,body').animate({scrollTop: $(target).offset().top},430000) 

$('html,body').click(function(){
  $('html,body').stop()
})

Answer 1

我试图通过点击scroll事件来实现这一点，但是很遗憾，这个事件在动画运行时被重复调用(应该知道得更清楚)。

我最终使用了对滚动事件更敏感并且可以区分scroll和mousewheel的jQuery Mousewheel Plugin，因此您可以编写如下内容：

$(window).bind("mousewheel", function() {
    $("html, body").stop();
});

http://jsfiddle.net/Yuw9R/1/

使用滚轮向上或向下滚动应该会停止自动滚动。您可能还想添加代码以重新启用向上/向下箭头。下面是你可以添加的代码：

$(window).bind("keydown", function(event) {
    var keyCode = event.which;
    /* up, down, left, right, or page up or page down */
    if (keyCode === 33 || keyCode == 34 || (keyCode >= 37 && keyCode <= 40)) {
        $("html, body").stop();
    }
});

如果您不想使用插件，可以使用check out this related thread。