Can’t get infinite scroll to trigger

Questions
1

Here’s the condition that I am facing. I cannot get infinite scroll to trigger if there’s few items or items is blank.

<div class="page-content infinite-scroll-content" @infinite=${loadMore}>
  <div class="list simple-list">
    <ul>
      ${items.map((item, index) => $h`
      <li key=${index}>Item ${item}</li>
      `)}
    </ul>
  </div>
  ${hasMoreItems && $h`
  <div class="preloader infinite-scroll-preloader"></div>
  `}
</div>

let allowInfinite = true;
let hasMoreItems = true;
let lastItem = 20;
const items = [1, 2, 3];

const loadMore = () => {
  if (!allowInfinite) return;
  allowInfinite = false;

  setTimeout(function () {
    if (lastItem >= 200) {
      hasMoreItems = false;
      $update();
      return;
    }

    for (var i = 1; i <= 20; i++) {
      items.push(lastItem + i);
    }

    allowInfinite = true;
    lastItem += 20;

    $update();
  }, 1000);
}

return $render;
2

it will not trigger if page doesn’t have scroll. If you load page initially empty then call loadMore on pageInit

3

What if loadMore only loads few items and page still doesn’t have scroll. Any way to trigger if page doesn’t have scroll?

4

That doesn’t make much sense to me. You probably need to use pull to refresh then