我正在做的是使用 jQuery、AJAX 和 PHP 进行无限滚动,但是当您必须加载数据时,我会在转到页面顶部时重新加载页面,而不是在页面几乎位于底部时重新加载页面。页面,我留下了 jQuery 和 AJAX 的代码。预先感谢您!
<script type="text/javascript">
var start = 0;
var limit = 5;
var reachedMax = false;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height())
getData();
});
$(document).ready(function () {
getData();
});
function getData() {
if (reachedMax)
return;
$.ajax({
url: 'publicaciones.php',
method: 'POST',
dataType: 'text',
data: {
getData: 1,
start: start,
limit: limit
},
success: function(response) {
if (response == "reachedMax")
reachedMax = true;
else {
start += limit;
$(".results").append(response);
}
}
});
}
</script>
这是我的 PHP,我添加代码来解决我的问题。我认为我的 PHP 是必要的。
<?php
session_start();
include ('../conexion.php');
if(isset($_SESSION['id']))
{
$id = mysqli_real_escape_string($conexion, $_SESSION['id']);
$infouser = mysqli_query($conexion, "SELECT * FROM users WHERE id = $id");
$use = mysqli_fetch_array($infouser);
}
if(isset($_POST['getData']))
{
$start = mysqli_real_escape_string($conexion,$_POST['start']);
$limit = mysqli_real_escape_string($conexion,$_POST['limit']);
$consulta = mysqli_query($conexion, "SELECT * FROM publicaciones ORDER BY id_pub DESC LIMIT $start, $limit");
if(mysqli_num_rows($consulta) > 0)
{
$response = "";
while($data = mysqli_fetch_array($consulta)) {
$response .= "
<div class='card mt-3 border-0 rounded-0'>
<div class='card-body'>
<div class='row'>
<div class='col-sm-2'>
<div class='img-user rounded-circle'>
<img class='img-fluid-pub' src='../avatars/".$use['avatar']."' alt='User Image'>
</div>
</div>
<div class='col-sm-10'>
<a class='text-muted h3' href='perfil.php?id=".$use['id']."'>".$use['usuario']."</a><h3>Seguir</h3>
<p>".$data['fecha']."</p>
<p>".$data['titulo']." Me gusta</p>
<p id='descripcion'>".$data['descripcion']."</p>
<p class='leermas' onclick='leerMas(this);'>Leer más...</p>
<video controls>
<source src='../anadir-publicacion/publicaciones/".$data['video']."' type='video/mp4'>
Your browser does not support HTML5 video.
</video>
<p>Kcal: ".$data['kcal']." CarbHid: ".$data['carbohidratos']." Prot: ".$data['proteinas']." Gras: ".$data['grasas']." Tiempo: ".$data['tiempo']."m Personas: ".$data['personas']." Dinero aprox: ".$data['precio']."€ Categoría: ".$data['categoria']."</p>
</div>
</div>
</div>
</div>
";
}
exit($response);
}
else
exit('reachedMax');
}
?>
最佳答案
这是正常现象
$(window).scrollTop()
开头等于 0
并且 $(document).height()
等于 $(window).height()
所以是的 0 == 0 在页面顶部
你想要的是
var nb_px_before_load = 100
if($(window).innerHeight() - $(window).scrollTop() < nb_px_before_load){
getData();
}
使用带有断点的 chrome devTools 可以轻松看到这一点
关于javascript - 为什么我在向下滚动时不重新加载数据,而在无限滚动中返回到页面顶部时重新加载数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50188350/