Question

许多相关问题，但不幸的是不是我正在寻找的。

我正在尝试制作此功能。当用户使用滚动功能时，它向下滚动550px，下次再滚动550px等。我写了下面的代码，但似乎该函数运行到循环中。不知道怎么解决这个问题？感谢。

var start=0;
$( window ).scroll(function() {
    var body = $("html, body");
   start+=550;
        body.animate({scrollTop: start}, '2000', 'swing', function() { 
            return;
        });
});

Answer 1

每次scroll事件触发时（这很多次），您实际上都在尝试设置滚动位置的动画。因此，当您想要滚动到550时，jQuery仍然忙于尝试设置为500的动画（2秒很多时间）。为了给你一个想法，想想在同一个元素上同时运行的10多个动画，持续2秒，所有动画都有不同的参数。

有几种方法可以解决这个问题。在这种情况下，最好的方法是使用 debouncer （有时也称为 throttler ）。

简单的解决方法可能是告诉jQuery stop当前正在运行的动画，并运行新动画。

body.stop().animate({scrollTop: start}, '2000', 'swing', function() { 
    return;
});

jquery animate滚动到滚动上的位置

1 个答案: