A 60fps infinite scrollable list for mobile devices. There are some implementation of infinite scrolling out there. The best of them renders to the DOM only what the user sees onin screen at a give time and use GPU accelration for translating items. These techniques are used in this implementation too, but in order to achieve smooth scrolling in a list with complex items with complex DOM, or when the user scrolls fast even on old devices they are not enough.

In addition this list impements the following:

1. Recycling of Dom elements in a similar way that iOS and Android does at UITableView and RecyclerView.
2. Detect when the system is busy or the frame rate frequency is about to get lower and skip unnecessary work to enable smooth scrolling
3. Enable the user to use whatever rendering technique he likes. This gives the ability to use React, for example, to render recycled items and benefit high performance rendering of list items.

See Live demo from your mobile device.

var parentElement = ...

var infiniteList = new InfiniteList(
  {
    initialPage: {
      itemsCount: 100000
    },
    itemRenderer: function(domElement, index){
      domElement.innerHTML = "Item " + index;
    },
    itemHeightGetter: function(index){
      return 50;
    }
  }
).attach(parentElement)

The first argument to the itemRenderer is a domElement. The first time this element is rendered it is an empty DIV. Later on when this item becomes invisible because of scrolling action, for example, the DIV is not destroyed but cached and recycled for later use. The next time the item of this type is rendered the domElement might be a DIV with data of other item. This enable the user to update only the DOM elements that are changed instead of recreating the entire HTML content.

infinite-list uses a Universal Module Definition do you can use it with both CommonJS and RequireJS.

require('infinite-list')

define(['[path to list project]/dist/InfiniteList.js'], function(list){
  //your code goes here
});

If you need it as a standalone script that is referenced from your html file then just include dist/InfiniteList.js and you have it on the global scope.

npm install infinite-list

bower install infinite-list

to build the exapmles:

  npm update
  cd examples
  webpack

and you have the example files under "build" directory.

Create an InfinteList. config has the following properties:

the initial page configuration, has two properties:

1. itemsCount [Number] - The number of items in the list.
2. hasMore [Boolean] - True if we have more items to load (paging)

The renderer method to invoke when an item needs to be rendered. This method should populate the domElement with the HTML markup.

The renderer method to invoke a new page is about to be fetched and loadMore component should be rendered. This method should populate the domElement with the HTML markup.

Returns the height of an item by index

Returns the type of an item by its index. This type is used as the key for recycling elements which means that items with the same type might share the same domElement (if they are not visible together at the same time).

This method will be invoked when the list is scrolled to the end and 'hasMore' value is true. The list will render "Loading...' component and wait for the call back to return. The user should feed the callback with two parameters:

• pageItemsCount - the number of items loaded in this page
• hasMore - Are there more items to be loaded or this is the last page of the list.

A function that receive the index of item and scroll the list to that item position with/without animation

A function that tells the list to render again the items that are visible to the user. This is usually used when the user has changed the data of the list and wants to refresh the UI.