jquery - 在滚动 jquery 上显示加载的内容

Question

我有一个页面，我从我的 sql 数据库表中获取数据并加载它。需要在滚动时加载数据。因为我正在从数据库表中获取数据，所以很难弄清楚哪一行已经加载并加载除此之外的数据。那么有什么方法可以根据窗口高度向下滚动以显示更多数据 - 除了设置溢出以滚动主体或主容器？任何帮助表示赞赏。谢谢。

Answer 1

您可以跟踪一个状态变量，该变量告诉您​​的 php 脚本返回什么偏移量。

var offset = 0;
var loading = false;

$(window).on('scroll', function(){

    if($('#element').offset().top >= ($(window).scrollTop() - $(window).height()))
    {
        loading = true;
        $.ajax({
            //all your ajax settings here
            data: {offset: offset}
            success: function(data){
                // add data to dom here
                loading = false;
                offset += 1;
            }
        });
    }

});

这样，您将偏移量传递给脚本并返回与此数字相关的数据，但是您选择解释它。

mysql中使用的偏移量。由于您没有指定语言，因此我将给出一个 php 示例：

$limit = "0, 20";
if(isset($_POST['offset']))
{
    // obviously you should sanitize this, but for example we
    // ignore that for now.

    $limit = ($_POST['offset'] * 20) .", 20";
}

$sql = "SELECT * FROM `table` ORDER BY `date` DESC LIMIT $limit";
// run your query and echo the results

你看，传递的偏移量只是改变了查询以获取下一个数据块。在javascript中，我们在成功时增加这个数字，所以下次窗口到达底部时，它将下一个偏移量传递给php并返回下一个增量。我们使用任意数字 20 假设您正在返回某种具有行的数据，例如博客条目、图像等。