Функция анимации JQuery/непрерывная прокрутка «bounces»

Question

У меня есть веб-приложение C# MVC, которое отображает график прокрутки для отображения на цифровых вывесках. Он использует функцию анимации JQuery для прокрутки вверх до вершины, когда она достигает нижней (циклическая непрерывность во время ее работы). Я объясню, как работает приложение поэтапно.

Когда приложение запущено, оно прокручивается на дно, как обычно, а затем оживляет назад, но с некоторыми настройками, на втором проходе и каждый раз после того, как оно немного застрянет после прокрутки из начального Посмотреть. Затем приложение будет прокручиваться назад, а затем прокручивается вниз до самого нижнего уровня. Это отскок. Проблема, похоже, происходит, когда функция анимации установлена ​​медленнее (с использованием «медленного» или более высокого значения, такого как 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'); 
     } 
    }) 

}); 

EDIT 1 Я сделал некоторые дополнительные исследования, поскольку этот вопрос все еще происходит. Я думаю, что это может быть связано с временем задержки() и setInterval(), но до сих пор проблема оказалась сложной задачей. Я добавил несколько предупреждений, поэтому я мог легко сказать, когда скрипт начнет прокрутку вверх. К моему удивлению, я заметил, что они не срабатывали, когда происходит отскок, только на начальном (и правильном) прокрутке вверх. Я не очень хорошо знаком с JQuery, поэтому я как бы бросаю вещи на стену и вижу, если они будут держаться прямо сейчас.

EDIT 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() вызывается на элементе, в настоящее время работает-анимации (если таковые имеются) немедленно прекращается.