Virtual Scroll
_ ___ __ __ _____ ____
| | / (_)____/ /___ ______ _/ / / ___/______________ / / /
| | / / / ___/ __/ / / / __ `/ / \__ \/ ___/ ___/ __ \/ / /
| |/ / / / / /_/ /_/ / /_/ / / ___/ / /__/ / / /_/ / / /
|___/_/_/ \__/\__,_/\__,_/_/ /____/\___/_/ \____/_/_/
Virtual list that is able to render infinite ammount of DOm element using UITableView techniques and. This is already been done in a lot of ways but Here I am trying to use CSS translate to scroll the container which more performant than changing the top. Paul Irish made a great benchmark here http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Example Usage
Getting the library
git clone https://github.com/Khaledgarbaya/virtual-scroll.git
cd virtual-scroll
npm install
Code
// BASIC INITIALIZATION ; let listSource = ;for let i = 0; i < 3000; i++ listSource; let virtualScroll1 = // DOMnode the list will be renderd inside root: document0 itemHeight: 50 // ARRAY containg all the objects to be displayed inside the list source: listSource /** * FUNCTION to be called while creating a single item * * @param * @param */ { // EXAMPLE // itemNodes.text1 = document.createElement('span'); // itemContainer.appendChild(itemNodes.text1); } /** * FUNCTION to be called while updating a single item * * @param * @param * @param */ { // EXAMPLE // update itemNodes.text1 with itemData.itemId };
Improvement/TODO
- Documentation
- More Unit tests
- Adding Scrolling using mouse wheel
- Adding e2e tests
- handling images (only load the visible items)