实现简单的无限滚动效果

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

没有得到答案迫使我深入挖掘并找到解决方案。

这就是我为实现简单无限的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()。