如何在滚动时更新当前页面，并在页面末尾保留一定的像素

本文关键字：保留 像素 滚动 更新 当前页 | 更新日期: 2023-09-27 18:18:51

如何更新当前页面向下滚动与某些像素剩余页结束?

假设每个人都知道Facebook目前使用的功能。一旦我登录了，我可以看到一定数量的记录作为通知或新闻…等等等等。它必须是在HTML标记页面中分割结果集的机制。但是如果用户有1000000条记录…获取这么多的记录并将它们分割到某些页面中肯定会影响性能。那么如何在性能上下文中处理这个

如何在滚动时更新当前页面，并在页面末尾保留一定的像素

跟踪滚动条位置。

简而言之:使用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();

您需要这样做:

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;
    });
    */
  }
});
相关文章：