node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


view-list Build Status

An infinite scrolling list view element built on a virtual DOM.


View a live example displaying 200k rows:

Render the ViewList using virtual-dom:

var ViewList = require('view-list')
// Create an instance of our view list in document.body 
var viewlist = new ViewList({
  appendTo: document.body
// Create some data to add to the list 
var data = ['one', 'two', 'three']
// Render the data 
// Listen for scroll events coming up 
viewlist.addEventListener('scroll', function (element) {
  console.log('List was scrolled to ' + element.scrollTop)
// Every second, append a new row 
var i = 0
setInterval(function() {
  data.push('row ' + i++)
}, 1000)


var list = new ViewList(params)

params can be (in addition to the virtual-dom parameters):

  • tagName: The tag to use. Default 'ul'.

  • childTagName: The tag to use for child elements. Default 'li'.

  • className: The classes to use on main element. Default 'view-list'.

  • topClassName: The classes to use on top element. Default '.top'.

  • bottomClassName: The classes to use on bottom element. Default '.bottom'.

  • element: The DOM element of the list.

  • height: The total height of the container. Default 500.

  • rowHeight: The height of each row. Default 30.

  • eachrow: A function that gets called for each row to return a custom element per row. Default:

    function (row) {
      return this.html(this.childTagName, {
        style: {
          height: this.rowHeight
      }, [row])


Listen for events with list.addEventListener(name, function () {}).

  • load: Called when element has loaded.
  • scroll: Called when element has been scrolled.


(c) 2016 Kyle Robinson Young. MIT License