$(window).scrollTop() >= $(document).height() - $(window).height() - 10 无限滚动不工作

Question

JavaScript:

$.ajax({
        type: 'POST',
        url: 'getcontent.php',
        data: 'lastid=' + 0,
        dataType: "html",
        success: function (data) {
            console.log(data);
            $("#content").append(data);
        }
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
            var last_id = $(".entries:last").attr("id");
            loadMoreData(last_id);
        }
    });

    function loadMoreData(last_id) {
        $.ajax({
            type: 'POST',
            url: 'getcontent.php',
            data: 'lastid=' + last_id,
            dataType: "html",
            success: function (data) {
                console.log(data);
                $("#content").append(data);
            }
        });
    }

PHP:

<?php
include_once("Medoo.php");

use Medoo\Medoo;

$database = new Medoo([
    'database_type' => 'sqlite',
    'database_file' => 'db.db'
]);

$lastid = $_POST['lastid'];
//$lastid = 10;
$lastid += 1;
$html = "";
$content = $database->select("entries", ["id", "entry"], ["id[<>]" => [$lastid, $lastid + 9]]);

for ($i = 0; $i < count($content); $i++) {
    $html .= "<p class='entries' id='" . $content[$i]["id"] . "'>" . $content[$i]["entry"] . "</p>";
}
echo $html;
?>

HTML:

<html>
<head>
<style>

p {
    width: 200px;
    height: 100px;
    background-color: aqua;
}

</style>
</head>
<body>
<div id="content"></div>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
</script>
<script src="getcontent.js"></script>
</body>
</html>

无限滚动不起作用，我一向下滚动 jQuery 就加载所有条目，而不是只加载一个数据块。有任何想法吗？我认为这是导致故障的原因：

$(window).scrollTop() >= $(document).height() - $(window).height() - 10

但我不确定。我尝试了不同的东西，也尝试了教程和小提琴中的东西，但没有任何效果。我的 php 文件很好，它 returns 来自数据库的 10 个对象。

Answer 1

就是这样：document.body.offsetHeight < window.innerHeight + document.body.scrollTop + 100

$(window).scrollTop() >= $(document).height() - $(window).height() - 10 无限滚动不工作

$(window).scrollTop() >= $(document).height() - $(window).height() - 10 Infinite Scroll not working

php

ajax

jquery

scroll

infinite