ScrollListView

ScrollListView.js is a library that allows you to scroll over large data sets without get a performance impact. It does this though a clever algorithm of re-using a fixed number of cells and as you scroll repaints them beneath the last item. Think iOS UITableView for the web.

Demos

Go check the live demo of an infinite list using ScrollListView and one without.

Checkout ScrollListView working with iScroll for fast infinite scrolling on mobile devices. ScrollListView on mobile

Context

Take a look at the article I wrote about it if you'd like to know more about how it works.

Installation

npm install ScrollListView

This is a UMD package so if you just include the script in your page it'll attach to the window.

But if you prefer a module system this will work fine with commonjs or AMD modules just fine.

Usage

For a live example I highly recommend you check out the demo and view-source. To see how to you can configure it readon.

var ScrollListView = require('ScrollListView');

var scrollListView = new ScrollListView({
  element: document.querySelector('.list'),
  data: [... array of objects to render],
  cellHeight: 150,
  renderFn: render,
  renderCellFn: renderCellFn
});

API

element	The element that the re-usable cells will live inside. You don't add children to this the `renderFn` takes care of that.
data	The array of data the list will read from work scroll offset and heights
cellHeight	The abslute height in px that the cell will be.
renderFn	This function gets called on initialisation to render the initial list.
renderCellFn	When a cell is determined to be far enough out of the viewport this will be called with the element you can safely overwrite with the new data and the index in your data array passed in earlier.

render methods

The only thing that ScrollListView expects is that you pass through an array that contains your list data. How you choose to render that data is up to you.

I'll take the example code and walk you through how I chose to render my ScrollListView.

function render(count) {
    var cellsFrag = document.createDocumentFragment();

    for(var i = 0; i < count; i++) {
        var cell = document.createElement('li'),
        tweet = this.data[i];

        cell.className = 'scrolllist__cell gpuarise';
        cell.innerHTML = tmpl('tweet_tpl', tweet);
        cell.style.order = i+1;
        cellsFrag.appendChild(cell);
    }

    listContainer.appendChild(cellsFrag);
    listContainer.style.minHeight = this.data.length * this.CELLHEIGHT + 'px';
}

The above is very simple the count argument is the length of cells that the list uses based on some calculations on window height and the cellHeight you would of configured on init.

All I'm doing is creating a document fragment and looping over the count grabbing the corresponding bits of data from the data passed into our constructor it then create a list item that I innerHTML my data using the very simple tpl.js template engine.

renderCell method

The renderCell method is even easier.

function renderCell(cell, index) {
    cell.innerHTML = tmpl('tweet_tpl', this.data[index]);
}

This method passes in the cell and the index of which bit of data I should render into this cell then all I do is apply the template to the cell.

Each of these methods our bound to the instance they're called from so this refers to your scrollListView instance.