jQuery動畫頁面捕捉循環滾動結束

Question

所以我有一個垂直滾動網站的'網頁'的方式。當用戶停止滾動時，我希望瀏覽器對齊瀏覽最多的頁面。

我有一個方法來找到哪個元素是inview，並使用一個簡單的插件我有一個事件，當滾動停止時觸發。

我遇到的問題是如何正確使用它。

我使用瀏覽器動畫滾動到滾動停止處的inview頁面的頂部。然而，這會啓動另一個滾動並重新啓動一切，導致一些奇怪的不斷滾動的錯誤並導致它在頁面中跳躍。

有沒有人有任何不同的方式來實現這一點，以避免循環的想法？我現在真的很困難。

下面的代碼。並感謝您的任何建議。

$(window).bind('scrollstop', function(e){ 

//this grabs the ID of the div containing my h1 element. This is how I decide which 'page' is inview 
var inview = '#' + $('.section-header:in-viewport:first').parent().parent().attr('id'); 

//then I grab the distance from the top, so that it can be scrolled to 
var this_pos = $(inview).offset().top; 

//finally I animate the page to scroll to the top of the inview element. 
$('html > body').animate({'scrollTop' : this_pos}, 200).delay(1000); 


}); 

Answer 1

所以最後我解決了這個問題，在滾動結束時爲函數觸發添加了一個延遲。 100ms的延遲足以防止它過早發射並在不需要時用滾動調整頁面。這導致了頁面上的無限循環和怪異。

這是我的最終代碼：

$(window).bind('scrollstop', function(e){ 

    var inview = '#' + $('.section-header:in-viewport:first').parent().parent().attr('id'); 
    var this_pos = $(inview).offset().top;  

    //animate to the top of the .page, with a 200 delay 
    $('html > body').animate({'scrollTop' : this_pos}, 200); 


    //a delay of 100 here is enough to stop a scrollend loop starting causing weirdness. 
     }).delay(100); 

Answer 2

這樣的事情，也許呢？

$('body').animate({ 
    scrollTop: inview.offset().top - $('body').offset().top + $('body').scrollTop() 
});​