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

Question

我想在我的 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>

Answer 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>

Answer 2

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

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

Infinite scroll not triggered automatically | How to fix?

javascript

django

jquery

infinite-scroll

jquery-waypoints