显示滚动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，假设您要返回某些具有行的数据，例如博客条目，图像等。