顯示滾動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，假設您要返回某些具有行的數據，例如博客條目，圖像等。