SponsorsBecome a sponsor

Infinite Scroll

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:

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:

app.infiniteScroll.create(el)- add infinite scroll event listener to the specified HTML element

  • el - HTMLElement or string (with CSS selector) - infinite scroll container. Required.
Use this methods only in case you have added infinite scroll content after page init or if you want to enable it later. Otherwise if there is "infinite-scroll-content" element on page init it will be created automatically

app.infiniteScroll.destroy(el)- remove infinite scroll event listener from the specified HTML container

  • el - HTMLElement or string (with CSS selector) - infinite scroll container. Required.

Infinite Scroll Events

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

Dom Events

EventTargetDescription
infiniteInfinite Scroll container<div class="page-content infinite-scroll-content">Event will be triggered when page scroll reaches specified (in data-infinite-distance attribute) distance to the bottom.

App Events

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

EventTargetArgumentsDescription
infiniteapp(el, event)Event will be triggered when page scroll reaches specified (in data-infinite-distance attribute) distance to the bottom.

Example

infinite-scroll.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Infinite Scroll</div>
      </div>
    </div>
    <div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite=${loadMore}>
      <div class="block-title">Scroll bottom</div>
      <div class="list simple-list list-strong-ios list-outline-ios list-dividers-ios">
        <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>
Improve this Doc
On this page