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 事件来实现这一点，但是可惜，在动画运行时会重复调用此事件（应该更清楚）。

我最终使用了一个jQuery Mousewheel Plugin，它对滚动事件更敏感，可以区分scroll和mousewheel，这样你就可以这样写：

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