Dynamic Infinite List In Vanilla JavaScript – Infilist

Preview:

Description:

The Infilist JavaScript library helps you dynamically generate a list view (vertical scroller) with infinite scroll and asynchronous callback support.

How to use it:

Download and insert the main JavaScript into the document.

<script src="build/scroll.min.js"></script>

Initialize the library with following required parameters:

• GENERATOR: Callback used to generate the list
• TRESHOLD: Amount of pixels below and above the parent border which are deemed ‘in view’. Calculated as CHILD_SIZE * TRESHOLD.
• CHILD_SIZE: Fixed height of a single list element.

myList = new InfiScroll(containerEl, {
  generator: function(index, resolve) {
    // Generate the HTMLElement in any way you want to here and then
    // resolve the Promise with it.
    const element = XXX;
    resolve(element);
  },
  childSize: 100,
  treshold: 7, 
  }
});

Optional settings with default values.

myList = new InfiScroll(containerEl, {
  // Size of the list.
  SIZE: "size", 
  // Generator function.
  QUERY: "generator", 
  // Boolean indicating if the list should initially display full height.
  FIXED_SIZE: "fixedSize",
  // Size of the cache. 
  CACHE_SIZE: "cacheSize", 
  // Function which will check if view should be updated
  INVALIDATE_CHECK: "check", 
  // Callback for DOM deletion
  DOM_DELETE: "domDelete", 
  // Callback to show or hide spinner animation.
  TOGGLE_SPINNER: "spinner", 
  // Callback to show or hide spinner animation.
  THROTTLE_SCROLL: "throttleScroll", 
  // Do not reset scroll height when reloading.
  KEEP_POSITION_ON_RELOAD: "keepPositionOnReload", 
  // Do not reset scroll height when reloading.
  BATCH_LOAD: "batchLoad" 
  
});

API methods.

// Invalidate the list explicitly.
myList.invalidate();
// Update the size of the list, also causes entire list to be invalidated.
myList.updateSize(newSize: number);
// Remove all children from list and reload.
myList.reload();
// Update a single item in the list
myList.updateItem(index, ...data);
// Unload event listeners
myList.dispose();

Changelog:

03/07/2019

• fix crash if elements to be removed do not exists after reload

02/20/2019

• fix js error while removing ghost elements