Не работает бесконечная прокрутка Javascript, которая обновляет новые div'ы при достижении нижней границы экрана

Я пробую веб-приложение с использованием Django из курса edX CS50 Web Programming.

Ниже приведен javascript для бесконечной прокрутки, которая обновляет 20 сообщений каждый раз, достигая нижней части экрана, но она просто остановилась после достижения 20-го сообщения.

<script>
  // Start with first post
  let counter = 1;

  // Load posts 20 at a time
  const quantity = 20;

  // When DOM loads, render the first 20 posts
  document.addEventListener('DOMContentLoaded', load);

  window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
        load();
    }
  };

  // Load next set of posts
  function load() {

      // Set start and end post numbers, and update counter
      const start = counter;
      const end = start + quantity - 1;
      counter = end + 1;

      // Get new posts and add posts
      fetch(`/users/home/posts?start=${start}&end=${end}`)
      .then(response => response.json())
      .then(data => {
          data.posts.forEach(add_post);
      })
  };

  // Add a new post with given contents to DOM
  function add_post(contents) {

      // Create new post
      const post = document.createElement('div');
      post.className = 'post';
      post.innerHTML = contents;

      // Add post to DOM
      document.querySelector('#posts').append(post);
  };
</script>

Ниже приведена функция posts в python из файла views.py

def posts(request):
    if not request.user.is_authenticated:
        return HttpResponseRedirect(reverse("users:login"))
    # Get start and end points
    start = int(request.GET.get("start") or 0)
    end = int(request.GET.get("end") or (start + 9))

    # Generate list of posts
    data = []
    for i in range(start, end + 1):
        data.append(f"Post #{i}")

    # Artificially delay speed of response
    time.sleep(1)

    # Return list of posts
    return JsonResponse({
        "posts": data
    })

Когда я удалил

if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) { }

он обновляет divs бесконечно и никогда не останавливается.

В чем здесь проблема?

Вернуться на верх