Question

我有一个C＃MVC Web App，它显示在数字标牌上显示的滚动时间表。它使用JQuery动画功能在它到达底部时向上滚动到顶部（在它运行时连续循环）。我将逐步解释应用程序的运行情况。

当应用程序启动时，它会像正常一样滚动到底部，然后动画回到顶部，但是通过某些设置，在第二次传递时，每次在滚动出初始视图后会卡住一点点。然后应用程序将滚动回到顶部，然后正常向下滚动到底部。这是反弹。当animate函数设置为较慢时（使用＆＃39; slow＆＃39;或更高的值，如3000），似乎会出现此问题。

以下是控制滚动到底部和动画回到顶部的代码：

 $(document).ready(function () {
    var div = $('#docket');

    var scrollDown = setInterval(function () {
        var pos = div.scrollTop();
        div.scrollTop(pos + 2);
    }, 75)

    // Check if we are at the bottom.  If so, wait 1 second and scroll to the top.
    div.bind('scroll', function () {
        if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
            div.delay(1000).animate({ scrollTop: 0 }, 'slow');
        }
    })

});

编辑1 由于问题仍然存在，我已经做了一些额外的调查。我认为它可能与delay（）和setInterval（）的时间有关，但到目前为止，问题已经证明很难得到处理。我添加了一些警报，以便我可以轻松判断脚本何时开始滚动到顶部。令我惊讶的是，我注意到它们在弹跳发生时没有被触发，只是在初始（和正确）滚动到顶部。我对JQuery并不是很熟悉，所以我会把事情扔到墙上，看看他们现在是不是很坚持。

编辑2 使用此答案的部分代码Callback of .animate() gets called twice jquery。我发现我的#docket div被动画了两次。该答案中的修复并不能防止发生反弹。这是带有链接答案代码的最新版本。完成动画文档警报显示两次。

$(document).ready(function () {
    var div = $('#docket');

    var scrollDown = setInterval(function () {
        var pos = div.scrollTop();
        div.scrollTop(pos + 2);
    }, 50)


    // Check if we are at the bottom.  If so, wait 1 second and scroll to the top.
    div.bind('scroll', function () {
        if ($(this).scrollTop() + $(this).innerHeight() == this.scrollHeight) {
            div.delay(100).animate({ scrollTop: 0 }, 'slow', function() {
                // Called per element
                alert("Done animating " + this.id);
            }).promise().then(function() {
                // Called when the animation in total is complete
                alert("Completed animation");
            });
        }
    })
});

Answer 1

您可以使用stop（）方法限制它。

div.delay(1000).stop().animate({ scrollTop: 0 }, 'slow');

在元素上调用.stop（）时，当前正在运行的动画（如果有的话）立即停止。

JQuery Animate功能/连续滚动＆＃34;跳出＆＃34;

1 个答案: