實現簡單的無限滾動效果

Question

這是我的WordPress博客上的導航。

當用戶點擊「加載更多信息」按鈕（這是不是一個真正的按鈕，而是一個h1標籤），一個Ajax腳本加載更多帖子發了到首頁。

我想改變這個行爲，以便當用戶滾動到頁面的底部時自動加載帖子。

觸發AJAX事件後的功能如下：

$(".home #more_posts").click(function(e) { 
    $("#more_posts .loader").animate({opacity: 1},200); 
    $.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', { 
     action: 'and_action', 
     off: offset+number, 
     pagenumber: page_number, 
     query_post: '&orderby=date&order=<? echo $order_post ?>&category_name=<? echo $_POST['category'] ?>' 
    } , (.....) 
}); 

我想要實現這個變化的原因是爲了實現inifinite滾動事件。

Answer 1

沒有得到答案迫使我深入挖掘並找到解決方案。

這就是我所做的，以實現簡單的無限scoroll效果。我希望這會對一些人有所幫助。

var now = new Date().getTime(); 
$(window).on('scroll', function() { 
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 400) {  
     if (new Date().getTime() - now > 1000) { 
      loadNextPage(); 
      now = new Date().getTime(); 
    } 

function loadNextPage() 
{ 
    (...) 
    $(window).scrollTop(position - 500); 
} 

讓掰開代碼：

1. ，你只改變觸發loadNextPage()功能是非常簡單的事件的一部分 - 你走「點擊」「滾動」。
2. 然後，當瀏覽器滾動條距文檔底部400（px）時，會有一個條件觸發該函數。
3. 現在與new Date()對象的部分。這種情況確保每個向下滾動都不會觸發多次觸發功能loadNextPage()。條件說明每個觸發器之間必須至少有一秒之間的間隔loadNextPage()。
4. 最後，在loadNextPage()函數結束時，我們將滾動條向上移動一點，使得.on("scoroll")事件中的第一個條件不是連續匹配的，但它需要用戶向下滾動以再次激發loadNextPage()。