无限滚动不会自动触发 |怎么修？答案

【问题标题】：Infinite scroll not triggered automatically | How to fix?无限滚动不会自动触发 |怎么修？
【发布时间】：2018-01-16 08:33:53
【问题描述】：

我想在我的 Django 项目中使用waypoints 插件的无限滚动选项。我使用下一个代码，但插件无法正常工作。当我走到文档末尾时，我想自动触发插件。但是现在插件仅在我更改浏览器大小时才有效。我的错误在哪里，我有点困惑。

脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/infinite.min.js">

Django 为我渲染下一个 html：

<ol class="infinite-container">
  <li class="infinite-item"></li>
  <li class="infinite-item"></li>
  <li class="infinite-item"></li>
  <li class="infinite-item"></li>
  <li class="infinite-item"></li>
  <li class="infinite-item"></li>
</ol>

<div class="loading">
  <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
</div>

<a class="infinite-more-link" href="?page=2"></a>

<script>
  var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0],
    onBeforePageLoad: function () {
      $('.loading').show();
    },
    onAfterPageLoad: function ($items) {
      $('.loading').hide();
    }
  });
</script>

【问题讨论】：

标签： javascript jquery django infinite-scroll jquery-waypoints

【解决方案1】：

你的代码工作正常，但是你包含脚本文件的方式是错误的，看看是不是你的问题，替换这个代码>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js">

带有脚本标签

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

测试下面的演示

编辑：如果您需要更早从底部触发它，请使用带负值的偏移量

var infinite = new Waypoint.Infinite({
  element: $('.infinite-container')[0],
  offset: -200,
  onBeforePageLoad: function() {
    $('.loading').show();
    console.log('before pageLoad ajax');
  },
  onAfterPageLoad: function($items) {
    $('.loading').hide();
    console.log('after pageLoad ajax');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/infinite.min.js"></script>
<ol class="infinite-container">
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
  <li class="infinite-item">Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
</ol>

<div class="loading">
  <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>Loading
</div>

<a class="infinite-more-link" href="?page=2"></a>

【讨论】：

好吧，这是我的错。在帖子中我犯了错误，我使用的是脚本，而不是链接。所以问题不在于此。你还有其他建议吗？正如我所说，插件仅在我更改浏览器大小时才有效。当我走到文档末尾时，我想自动触发插件。好奇怪。
在我看来，我需要添加offset 选项，但我不知道如何正确添加。 imakewebthings.com/waypoints/api/offset-option
哦，你可以定义为数字（px from the buttom）或者%，例如：'offset': 150
我尝试了不同的值，但插件没有按预期工作。例如，10-50 之间的任何 % 都不会发生反应。例如，当我使用 60-90% 时，它会加载所有页面。用户甚至不会注意到加载图标。在这种情况下，没有逐步加载。
你的图标在页面的什么位置？您希望什么时候触发 ajax？

【解决方案2】：

终于找到了原因。我的infinite-container 元素位于具有overflow: auto; 样式的div 块中。当我删除这个样式插件时触发正确。

【讨论】：