virtual Scroll

tal como en https://github.com/sergi/virtual-list

HTML

<h1>Virtual Scroll</h1>
<div id="container"></div>

CSS

.celda{
  	position:absolute;
  	height:18px;
  	color:black;
  	width:100%;
    font-family:Arial;
    text-overflow: ellipsis;
    vertical-align: middle;
  border-right: 1px dotted silver;
  border-bottom-color:1px solid  silver;
      cursor: default;
    padding-top:2px;
    padding-bottom:2px;
  }
  
  .green_bg{
  	color:black;
  	background:#BADA55;
  }

JavaScript

/**
 * Creates a virtually-rendered scrollable list.
 * @param {object} config
 * @constructor
 */
function VirtualList(config) {
  var width = (config && config.w + 'px') || '100%';
  var height = (config && config.h + 'px') || '100%';
  var itemHeight = this.itemHeight = config.itemHeight;

  this.items = config.items;
  this.generatorFn = config.generatorFn;
  this.totalRows = config.totalRows || (config.items && config.items.length);

  var scroller = VirtualList.createScroller(itemHeight * this.totalRows);
  this.container = VirtualList.createContainer(width, height);
  this.container.appendChild(scroller);

  var screenItemsLen = Math.ceil(config.h / itemHeight);
  // Cache 4 times the number of items that fit in the container viewport
  this.cachedItemsLen = screenItemsLen + 1;
  this.lastElementIndex = this.cachedItemsLen;
  this.initNodes(this.container, 0);

  var self = this;
  var lastRepaintY;
  var maxBuffer = screenItemsLen * itemHeight;
  var lastScrolled = 0;

  function onScroll(e) {
	  e = e || window.event; //ie
	  var te = e.target || e.srcElement; //ie
    var scrollTop = te.scrollTop; // Triggers reflow
    var first = parseInt(scrollTop / itemHeight);
    self.updateNodes(self.container, first < 0 ? 0 : first);
    lastScrolled = Date.now();
    e.preventDefault && e.preventDefault();
  }

  if(this.container.attachEvent)
	  this.container.attachEvent('onscroll', onScroll);
  else
	  this.container.addEventListener('scroll', onScroll);
}

VirtualList.prototype.createRow = function(i) {
  var item;
  if (this.generatorFn)
    item = this.generatorFn(i);
  else if (this.items) {
    if (typeof this.items[i] === 'string') {
      var itemText = document.createTextNode(this.items[i]);
      item = document.createElement('div');
      item.style.height = this.itemHeight + 'px';
      item.appendChild(itemText);
    } else {
      item = this.items[i];
    }
  }

  item.classname='vrow';
  item.style.position = 'absolute';
  item.style.top = (i...