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。

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

1 个答案: