javascript - 如何实现滚动时自动加载更多数据的功能？

Question

我已经被这个问题困扰了两天了。我正在显示主题列表。一切工作正常，但每当我滚动到页面底部时，我想向列表中添加更多数据，就像在流行的社交媒体网站上一样。

这是我的 get-topic.php

<?php
include_once 'resources/Wall.php';
$Wall   = new Wall;
global $databaseConnection;
$username_get = mysqli_query($databaseConnection, "SELECT * from tableTopics order by columnTopicId desc limit ".$topicsPerPage."");
$numberRows = mysqli_num_rows($username_get);/* get the total number of rows and put it in a variable */
$loopCount = 1;
$html .= '  <div class="topics-box">';
while ($name = mysqli_fetch_array($username_get)) {/* loop through the topics */
    $topicId = $name['columnTopicId'];
    $topicTitle = $name['columnTopicTitle'];
    $getPic = $Wall->getTopicPicture($topicId);
    $html .= '  <div class="topic-header">
                    <img class="topic-picture" src="'.$getPic.'">
                    <a class="topic-title">'.$topicTitle.'</a>
                    <a class="topic-action-button"><div class="icon-more topic-action-button-icon"></div></a><a class="topic-follow-button"><div class="icon-footprints topic-follow-button-icon"></div>Follow</a>
                </div>
                <div class="topic-stats">
                    <div class="topic-right-stat">54k Followers</div>
                </div>';
    if ($loopCount < $numberRows) {
        $html .= '<div class="topics-border"></div>';
    }
    $loopCount ++;/* add 1 to the loop count everytime */
}
$html .= '  </div>';
echo $html;
?>

这是我的 js 函数

function loadMoreTopics() {
    alert("hi");
}

每当用户使用此代码滚动到页面底部时，我都会调用该函数。

        jQuery(window).scroll(function() {
            if (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {
               loadMoreTopics();
            }
        });

我尝试过使用几个 Ajax 示例，但没有一个对我有用。我应该使用什么 Ajax 函数？请帮忙。

Answer 1

看看jQuery Scrollbox plugin 。您可以使用它轻松实现所需的功能。只需在 html 中定义容器并使用以下代码:

var $container = $('#content-container');

$container
    .on('reachbottom.scrollbox', function () {
        $.ajax({
            // options like url, dataType etc.
        }).done(function (response) {
            $container
                .append(response)
                .scrollbox('update');
        });
    })
    .scrollbox({
        distanceToReach: {
            y: 100
        }
    });