内容完成时停止无限滚动

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) - 如果您的完成呼叫有效，那么您肯定遇到了有关 nearBottomOfPage() 的问题，正如我所说上面#1

3) 如果即使更改了 #2 项，它仍然无法正常工作，请尝试将绑定的回调从匿名函数中分离到单独的函数中，以便对其进行更多控制，以便稍后取消绑定该回调，如下所示：

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