1

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

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

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

1 回答 1

1

我试图通过点击scroll事件来实现这一点，但可惜的是，当动画运行时，这个事件被反复调用（应该更好地知道）。

我最终使用了一个jQuery Mousewheel 插件，它对滚动事件更敏感，并且可以区分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();
    }
});

如果您不想使用插件，请查看此相关线程。

于 2011-01-03T05:37:57.337 回答