簡單無限滾動效果的實現

Question

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

當用戶單擊“加載更多帖子”按鈕（實際上不是按鈕，而是h1標簽）時，將觸發ajax腳本，該腳本會將更多帖子加載到主頁。

我想更改此行為，以便當用戶向下滾動到頁面底部時自動加載帖子。

觸發ajax post事件的函數如下所示：

$(".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'] ?>'
    } , (.....)
});

我要實現此更改的原因是要實現無限滾動事件。

Answer 1

沒有得到答案，迫使我深入研究並找到解決方案。

這就是我實現簡單無限滾動效果的方法。 我希望這會對某些人有所幫助。

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() 。