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

All you need to make it work is to add additional "infinite-scroll" class to any scrollable container, particularly to our page scrolling area - <div class="page-content">:

<div class="page">
    <div class="page-content infinite-scroll" data-distance="100">
        ... 
    </div>
</div>

Where:

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

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

Infinite Scroll On Top

If you need to use infinite scroll on top 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 infinite-scroll-top">
        ... 
    </div>
</div>

Infinite Scroll Events

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

Infinite Scroll API

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

myApp.attachInfiniteScroll(container) - add infinite scroll event listener to the specified HTML container

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

myApp.detachInfiniteScroll(container) - remove infinite scroll event listener from the specified HTML container

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

Use myApp.attachInfiniteScroll method only if you detached infinite scroll events using myApp.detachInfiniteScroll because infinite scroll event listener will be attached automatically within 'page:init' event

Example

<div class="page-content infinite-scroll">
  <div class="list-block">
    <ul>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div>
      </li>
      ...
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">Item 20</div>
        </div>
      </li>
    </ul>
  </div>
  <!-- Preloader -->
  <div class="infinite-scroll-preloader">
    <div class="preloader"></div>
  </div>
</div> 
.infinite-scroll-preloader {
  margin-top:-20px;
  margin-bottom: 10px;
  text-align: center;
}
.infinite-scroll-preloader .preloader {
  width:34px;
  height:34px;
}        
var myApp = new Framework7(); 
 
var $$ = Dom7;
 
// Loading flag
var loading = false;
 
// Last loaded index
var lastIndex = $$('.list-block li').length;
 
// Max items to load
var maxItems = 60;
 
// Append items per load
var itemsPerLoad = 20;
 
// Attach 'infinite' event handler
$$('.infinite-scroll').on('infinite', function () {
 
  // Exit, if loading in progress
  if (loading) return;
 
  // Set loading flag
  loading = true;
 
  // Emulate 1s loading
  setTimeout(function () {
    // Reset loading flag
    loading = false;
 
    if (lastIndex >= maxItems) {
      // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
      myApp.detachInfiniteScroll($$('.infinite-scroll'));
      // Remove preloader
      $$('.infinite-scroll-preloader').remove();
      return;
    }
 
    // Generate new items HTML
    var html = '';
    for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
      html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
    }
 
    // Append new items
    $$('.list-block ul').append(html);
 
    // Update last loaded index
    lastIndex = $$('.list-block li').length;
  }, 1000);
});