Have ideas to improve npm?Join in the discussion! »


    1.0.1 • Public • Published


    Virtualize the list

    aurelia-virtual-scroller allows to virtualize a list without losing you observer model context. It will help to reduce significantly the render time from the browser from lineal to constant time. It its mobile friendly (the reason it was created for) and with some configurations that allows to use this plugin in a responsive design application. Its open source and everybody can collaborate with its code base to improve and have a better plugin.


    npm install aurelia-virtual-scroller --save


    aurelia-virtual-scroller is a custom-attribute you can add to a markup section when you want to virtualize an observable list. Below is a full configuration example:

           <div v-scroll="slot-height.bind: 400;
                          slot-line-height.bind: 70;
                          fetcher.bind: fetcher;
                          storage.bind: list;
                          debug.bind: true;
                          window-scroller.bind: true;
                          viewport-element.bind: 'lazy-scroll-container';
                          callback.bind: buildRowCallback;
                                { breakpointFrom: 400, breakpointTo: 900, height: 100 },
                                { breakpointFrom: 100, breakpointTo: 399, height: 200 },
                                { breakpointFrom: 900, breakpointTo: 3000, height: 70 }

    Parameters Table

    1. slot-height: If you want to virtualize a container you need to specify in pixels the total height for that container.
    2. slot-line-height: Its the initial height for every row. Its specific and any content overflowed will be hidden. If you want to support responsive behavior check the breakpoints option.
    3. fetcher: A function that will be called by the plugin for infinite scroll support.
    4. storage: An observable array to virtualize into the container.
    5. debug: Enable console information from the plugin.
    6. window-scroller: Enable full window virtualization.
    7. callback: A callback passed that can be used for build the row. Its a required parameter which returns a string type that supports aurelia syntax since the plugin will compile that. It retuns a promise.
    8. breakpoints: Specify for a width range which height will the rows measure.

    Callback Parameter Sample

           return "<div>${propertyOne}</div>";   

    Fetcher Sample

        return new Promise((resolve, reject) => {
           return resolve([{ "propertyOne": "Test" }]); 


    npm i aurelia-virtual-scroller

    DownloadsWeekly Downloads








    Last publish


    • avatar
    • avatar