Infinite Scroll

• Infinite Scroll Layout
• Infinite Scroll On Top
• Infinite Scroll App Methods
• Infinite Scroll Events
• Dom Events
• App Events
• Example

Infinite Scroll allows to load additional content or do any other required action when page scroll is near to the bottom.

Infinite Scroll Layout

To enable Infinite Scroll you need to add additional infinite-scroll-content class to any scrollable container, particularly to our page scrolling area - <div class="page-content">:

<div class="page">
    <div class="page-content infinite-scroll-content infinite-scroll-top">
        ...
        <div class="preloader infinite-scroll-preloader"></div>
    </div>
</div>

Where:

• div class="page-content infinite-scroll-content" our infinite scroll container

• data-infinite-distance attribute allows to configure distance from the bottom of page (in px) to trigger infinite scroll event. By default, if not specified, it is 50 (px)

• div class="preloader infinite-scroll-preloader" preloader with few additional styles to be used with infinite scroll

Infinite Scroll On Top

If you need to use infinite scroll on top of the page (when it scrolled to top), you need to add additional infinite-scroll-top class to "page-content":

<div class="page">
    <div class="page-content infinite-scroll-content infinite-scroll-top">
        <div class="preloader infinite-scroll-preloader"></div>
        ...
    </div>
</div>

Infinite Scroll App Methods

There are two App's methods that can be used with infinite scroll container:

Infinite Scroll Events

Infinite Scroll will fire the following DOM events on app instance:

Dom Events

App Events

Infinite scroll component emits events on app instance as well as on DOM element.

<template>
  <div class="page" data-page="home">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title sliding">Infinite Scroll</div>
      </div>
    </div>
    <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>
  </div>
</template>
<script>
  export default (props, { $, $update }) => {
    let allowInfinite = true;
    let hasMoreItems = true;
    let lastItem = 20;
    const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

    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;

  }
</script>