Infinite scroll not triggered automatically | How to fix?

Question

I want to use infinite scroll option of waypoints plugin in my Django project. I use next code but plugin don't work correctly. When I go at the end of the document, I want automatically trigger the plugin. But right now plugin works only when I change the size of browser. Where is my mistake, I am little bit confused.

scripts:

<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 render me next 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

Finally I found the reason. My infinite-container element was in div block which had overflow: auto; style. When I remove this style plugin triggered correctly.