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

您的代码运行正常，但您添加脚本文件的方式有误，请查看这是否是您的问题，请替换此代码＆gt;

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

测试下面的演示

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

2 个答案: