如何更新當前頁面向下滾動，並保持某個像素爲頁面結尾？

Question

如何更新當前頁面向下滾動，某些像素保持爲頁面結尾？

假設每個人都知道Facebook當前使用的功能。一旦我登錄，我可以看到通知或新聞..bla bla bla記錄的certian數量..它必須是在html標記頁面中拆分結果集的機制..但如果用戶有1000000條記錄.. 。獲取這些數量的記錄並將它們拆分成特定的頁面會影響性能......所以如何在處理情況下處理這些記錄。

Answer 1

跟蹤滾動位置。

簡而言之：使用jQuery您訂閱滾動事件，並且當您從底部開始X像素時，您將開始加載新數據部分。 在服務器上，您必須擁有一個腳本或方法，根據傳遞的參數爲您提供下一個「頁面」數據。

這是我當前項目的一段代碼。它在CoffeeScript中，但我希望你能明白。

subscribeToScrollEvents =() -> 
    VK.addCallback 'onScroll', (scrollTop, windowHeight) -> 
    # check if we have to load new portion of data 
    if !window.app.isAutoloading && scrollTop + 250 >= $(document).height() - windowHeight 
     # take 'write-lock' 
     window.app.isAutoloading = true 
     window.app.scrollMore() 

window.app.scrollMore =() -> 
    # find out how much we already loaded 
    offset = $('#history_events').find('.history_row').length 
    $.get '/history/more', 
     offset: offset, 
     section: $('.history_section.selected').attr('id') 
     (data) -> 
     if data == '' 
      # do nothing 
     else 
      # release lock 
      window.app.isAutoloading = false 

      # process data 
      $('#history_events').append(data); 
      window.app.highlight_profiles(); 

Answer 2

你需要做這樣的事情：

var loadingNewContent = false; 

$(window).scroll(function() { 

    var remaining = $(document).height() - $(window).scrollTop(); 

    // lets say you want to load newer content once only 50 more pixels remain to be scrolled 
    if(remaining <= 50 && loadingNewContent == false) { 

    // set loading flag as true 
    loadingNewContent = true; 

    // load new content and append to body/container etc.. 
    $.get('/server/newcontent', function(data) { 

     // append new content to body/container etc. 

     // reset flag 
     loadingNewContent = false; 

    }); 
    */ 

    } 

});