$ (window) .scrollTop () & gt; = $ (document) .height () — $ (window) .height () — 10 бесконечная прокрутка не работает
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 файл в порядке, он возвращает 10 объектов из базы данных.
Решение
Вот и все: document.body.offsetHeight < window.innerHeight + document.body.scrollTop + 100
Другие решения
Других решений пока нет …