Question

how to update current page on scroll down with certain pixel remaining to page end ?

Assuming everybody knows the functionality currently using by Facebook. Once i got logged in , i can see certian number of records as notification or news..bla bla bla.. it must be the mechanism to split the result set in html markup pages.. but how if user has 1000000 of records… to fetch the this amount of records and split them in certain pages will affect the performance certainly.. so how to handle this in context of perforance.

Answer 1

Track scroll position.

In short: with jquery you subscribe to scroll events and, when you are X pixels from the bottom, you start loading new portion of data.
On the server you’ll have to have a script or method that gives you next ‘page’ of data, according to passed parameters.

Here’s a piece of code from my current project. It’s in CoffeeScript, but I hope you’ll get the idea.

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();