Demo - Infinite ListBox

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    Infinite ListBox
  </h1>

  <p>
    This sample shows how you can use the native HTML scroll 
    event to add items to a ListBox when the user scrolls down
    near the bottom of the list.</p>
  <p>
    To see how this works, scroll down the list using the
    mouse or the keyboard:</p>
    
  <div id="theListBox"></div>
  
  <p id="count">
  </p>

CSS

.wj-listbox {
  height: 200px;
  width: 200px;
  margin-left: 2em;
}
.wj-listbox-item {
  line-height: 2.5em;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // the ListBox
	var theListBox = new wijmo.input.ListBox('#theListBox', {
    itemsSource: getData()
  });
  
  // add elements when the user scrolls to the bottom of the list
  theListBox.hostElement.addEventListener('scroll', function(e) {
  	var el = e.target;
    
    // near the bottom?
    if (el.scrollTop + el.clientHeight > el.scrollHeight - 20) {
    
    	// add five elements to the list
    	var arr = theListBox.itemsSource;
      for (var i = 0; i < 5; i++) {
      	arr.push('item ' + arr.length)
      }
      
      // refresh the list and keep the scroll top
      var top = el.scrollTop;
      theListBox.collectionView.refresh();
      el.scrollTop = top;
      
      // show how many items we have
      var cnt = document.getElementById('count');
      cnt.textContent = 'The list now has ' + arr.length + ' items.';
    }
  })
  
	// get some data
  function getData() {
  	var arr = [];
    for (var i = 0; i < 20; i++) {
    	arr.push('item ' + i);
    }
    return arr;
  }
}