我有一些需要无限滚动的UI元素。所以我正在使用jscroll。
我想在div结束时获取新数据。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src=js/jquery.jscroll.js></script>
<script>
$('.scrollt').jscroll(function(){
$(".scrollt").load("/handle.php?lastdis=90");});
</script>
</head>
<body>
<?php
include_once('conn.php');
$start=0;
$query="Select * from data where id > ". $start ." Limit 90;";
$res=mysqli_query($con,$query);
echo '<div class="scrollt">';
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) {
echo "<p> ".$row[0]." ". $row[1]."<p><p><p>";
}
echo "</div>"
?>
</body>
</html>
所以基本上我会显示一个包含90条记录的页面，并希望在load（）函数中获取91条以上的记录，但这是行不通的。
handle.php代码
<?php
include_once('conn.php');
$goahead=$_GET['lastdis'];
$query="Select * from data where id > ". $goahead ." Limit 20;";
$res=mysqli_query($con,$query);
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) {
echo "<p> ".$row[0]." ". $row[1]."<p><p><p>";
}
仅仅两个小时的jquery体验。请耐心等待。
最佳答案
在.scroll()上使用window事件，如下所示：
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
You can test it here，它占据了窗口的顶部滚动，因此向下滚动了多少，添加了可见窗口的高度，并检查它是否等于整个内容的高度（
document）。如果您想检查用户是否在底部附近，它看起来像这样：$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});
You can test that version here，只需将
100调整为要触发的底部像素即可。现在，只需使用ajax而不是底部警告用户，就可以在底部添加要添加的数据。
$.ajax({
url: "handle.php",
type: "post",
data: values,
success: function(data){
$("#result").append(data);
},
error:function(){
alert("failure");
$("#result").append('Error Occurred while fetching data.');
}
});
关于php - jscroll结束时加载数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18021620/