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） - ＆gt;也尝试禁用页面上的所有样式。如果您有任何负边距或负填充，它将搞砸您的滚动检测器计算。

2）暂时忘记您的nearBottomOfPage() - 我的意思是尝试将您的代码从if (nearBottomOfPage() && !finish)更改为if (!finish) - 如果您的完成通话有效，那么您肯定遇到了问题nearBottomOfPage（）正如我上面在＃1

中所说的那样

3）如果即使对第2项进行更改它仍然无法正常工作尝试将绑定回调中的匿名函数分离到单独的函数中以便对其进行更多控制，因此您可以稍后取消绑定该回调，如下所示：< / p>

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

内容完成后停止无限滚动

1 个答案: