Virtual Scroll

This feature will significantly reduce rendering time of your large list, and improve overall performance of your application. If you have no idea, you can try this example.

To activate virtual scroll mode on your list of element. You need to add sf-virtual-list on the parent element. But if you have dynamic/different row height, then you also need to add sf-list-dynamic. If you think you need to update the content on the bottom more early, you could reduce the bottom scroll bounding with scroll-reduce-floor="112" in pixels.

sf.model('example', function(My){
    My.list = [{text:'Hello'}, {text:'world'}, ...];
});

If your list have dynamic item size you should use sf-list-dynamic.
But if your item size have exact same size you don't need to use sf-list-dynamic.

<ul class="sf-virtual-list sf-list-dynamic">
    <li sf-each="x in list">
        <label>{{x.text}</label>
    </li>
</ul>

This feature can also be combined with scrollbar library.

Available method for virtual scrolling

Virtual Scroll enabled list will have $virtual on the array. With above example you can access it with self.list.$virtual.

function	arguments	description
scrollTo	(index)	Instantly scroll to element on that index
refresh	()	Recalculate scroll bounding
offsetTo	(index)	Get an offset that can be used for scrollTop. Only available on static element height