javascript - 内容完成时停止无限滚动

Question

您好，我遇到了无限滚动功能的问题，当所有内容都已显示后，它仍然继续滚动(奇怪的行为)。我正在寻找一种方法来在显示所有内容时停止无限滚动

这是我的代码

<script type="text/javascript">
jQuery(document).ready(function ($) {
(function () {
  var page = 1,
    loading = false,
    finish = false;


  function nearBottomOfPage() {
    return $(window).scrollTop() > $(document).height() - $(window).height() - 200;
  }

  function finish() {
    finish = true;

  }
  $(window).scroll(function () {
    if (loading) {
      return;
    }
    if (nearBottomOfPage() && !finish) {
      loading = true;
      $('#loader').show();
      page++;
      $.ajax({
        url: '/office?page=' + page,
        type: 'get',
        dataType: 'script',
        success: function () {
          $('#loader').hide();
          loading = false;
        }
      });
    }
  });
}());

})

这是我尝试过的

 <script type="text/javascript">
 jQuery(document).load(function($) {
 function scrollfn (event) {
if (loading) {
  return;
}
if (nearBottomOfPage() && !finish) {
  loading = true;
  $('#loader').show();
  page++;
  $.ajax({
    url: '/office?page=' + page,
    type: 'get',
    dataType: 'script',
    success: function () {
      $('#loader').hide();
      loading = false;
      $(window).unbind('scroll',scrollfn);
    }
    });
   }
   }

  $(window).bind('scroll',scrollfn);
 })
 </script>

Answer 1

你永远不会调用你的“完成”函数。

在成功的ajax回调中调用finish();

如果不起作用，请尝试 3 件事:

1)我认为您的函数检查 nearBottomOfPage() 不正确(请参阅此处我的答案以获取正确版本: Calculating end of scroll on a web page )--> 也尝试禁用页面上的所有样式。如果你有任何负边距或负填充，它会搞乱你的滚动检测器计算。

2)暂时忘记您的 nearBottomOfPage() - 我的意思是尝试将您的代码从 if (nearBottomOfPage() && !finish) 更改为 if ( !finish) -- 如果你的 finish 调用有效，那么你肯定遇到了有关 closeBottomOfPage() 的问题，正如我在上面 #1 中所说的那样

3) 如果即使更改了第 2 项，它仍然无法正常工作，请尝试将绑定(bind)的回调从匿名函数中分离出来，放入一个单独的函数中，以更好地控制它，这样您就可以稍后取消绑定(bind)该回调，如下所示:

function scrollfn (event) {
    if (loading) {
      return;
    }
    if (nearBottomOfPage() && !finish) {
      loading = true;
      $('#loader').show();
      page++;
      $.ajax({
        url: '/office?page=' + page,
        type: 'get',
        dataType: 'script',
        success: function () {
          $('#loader').hide();
          loading = false;
          $(window).unbind('scroll',scrollfn);
        }
      });
    }
  }

$(window).bind('scroll',scrollfn);