Author: | samlinz |
---|---|
Views Total: | 1,599 views |
Official Page: | Go to website |
Last Update: | March 7, 2019 |
License: | MIT |
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