Javascript 一个简单无限滚动效果的实现

这是我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'] ?>'
    } , (.....)
});

$（“.home”更多帖子”）。单击（功能（e）{
$（“#more_posts.loader”）.animate（{opacity:1}，200）；
$.post（“/wp admin/admin ajax.php”{
行动：'和_行动'，
关闭：偏移量+数字，
页码：页码，
查询_post:'&orderby=date&order=&category_name='
} , (.....)
});

---

我想实施此更改的原因是为了实现有限滚动事件。

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

这就是我所做的，以实现一个简单的无限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);
}

让我们将代码分开：

您只需更改触发

loadNextPage（）

函数的事件的部分非常简单-您可以从“单击”转到“滚动”

然后，当浏览器滚动条距离文档底部400（px）时，有一个条件触发该函数

现在是具有

new Date（）

对象的部分。此条件确保每次向下滚动时不会多次触发

loadNextPage（）

函数。该条件表示

loadNextPage（）的每次触发之间必须至少有一秒的间隔

最后，在

loadNextPage（）

函数的末尾，我们将滚动条向上移动一点，以便

.on（“scoroll”）

事件中的第一个条件不会连续匹配，但它需要用户再次向下滚动以触发

loadNextPage（）