aperturejs

Aperture

📷 A JavaScript library providing a virtual scrolling container, allows (very large) datasets to be displayed with high performance and memory efficiency.

What it provides:

• A scrollable container that renders only visible items
• a flexible configuration making it works with different structures such as lists or tables

What it doesn't provide:

• how items are rendered, how layout looks like, it's in your hands

Install

npm install aperturejs

Example

• constructs a list of divs:

var aperture = new Aperture({
    items: items, // array of dataset
    onRender: (container, item, index, relativeIndex) => {
        let div = document.createElement('div');
        div.setAttribute('id', 'n-' + relativeIndex);
        div.innerHTML = item;
        container.appendChild(container);
    },
    onRerender: (container, item, index, relativeIndex) => {
        let div = document.getElementById('n-' + relativeIndex);
        div.innerHTML = item;
    },
    onOverflow: (container, relativeIndex) => {
        // this is necessary when the scroller reaches the end
        // the very last items may become placeholders
        div.innerHTML = '';
    }
});
aperture.renderTo(aDomElement);

License

MIT