Question

如何在向下滚动时更新当前页面，其中某些像素保留到页面结尾？

假设每个人都知道Facebook目前正在使用的功能。一旦我登录，我可以看到certian数量的记录作为通知或新闻.. bla bla bla ..它必须是在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;

    });
    */

  }

});

如何更新当前页面向下滚动，某些像素保留到页面结束？

2 个答案: