JQuery Animate函數/連續滾動「反彈」

我有一個C＃MVC Web應用程序，它顯示數字標牌上顯示的滾動時間表。它使用JQuery動畫函數在到達底部時回滾到頂部（在運行時不斷循環）。我會逐步解釋應用程序的運行。JQuery Animate函數/連續滾動「反彈」

當應用程序被啓動它滾動到像正常的底部，然後以動畫方式返回頂部，但有某些設置，在第二次，每次卷出初始後會卡住一點點後視圖。該應用程序然後將滾動回頂部，然後通常向下滾動到底部。這是反彈。這個問題似乎發生在將動畫功能設置得較慢時（使用'slow'或更高的值（如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"); 
      }); 
     } 
    }) 
});

來源

2015-11-05 PeskyToaster

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

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

當.stop（）被調用的元件上，所述當前正在運行的動畫（如果有的話）立即停止。

來源

2016-08-17 13:50:08

這是否停止在間隔中調用的函數？此時，由於使用動畫功能將屏幕移回起點，因此沒有動畫正在運行。除非我解釋這個錯誤。當在表格中向下滾動X> 1個循環時，發生「反彈」。它從來沒有發生在第一個。 – PeskyToaster

JQuery Animate函數/連續滾動「反彈」

回答

相關問題