kamilkp / angular-vs-repeat

Virtual Scroll for AngularJS ngRepeat directive
http://kamilkp.github.io/angular-vs-repeat/
MIT License
818 stars 228 forks source link

Using vs-repeat with a sliding-window slice of an extremely large data-set #172

Closed kiranjholla closed 7 years ago

kiranjholla commented 7 years ago

I am trying to use vs-repeat with an extremely large data-set, potentially running into millions of records. For this to work, I will have to retrieve the data from the server incrementally as and when it becomes necessary, and also discard unused data on the client-side, to conserve browser memory.

To implement this I am using client-side "vs-scrolled-to-beginning" and "vs-scrolled-to-end" callbacks to initiate server calls to retrieve more data, and also ensure that only records within visible bounds (+20 records on each side) are retained in the browser memory.

Records that are beyond those limits will be discarded. For example, when the user scrolls to startIndex = 40 and endIndex = 50, the records from 0 - 20 are discarded. These will be fetched again from the server if the user starts scrolling up again. The basic idea is to keep the browser memory usage low, given that the total data-set can run into a huge size.

I looked at the approach used on https://github.com/kamilkp/angular-vs-repeat/issues/10 and tried to enhance that to fit my purpose. It works OK.

A working example of the issue is at https://jsfiddle.net/kjholla/8tytptbb/

My issue is that whenever records are removed from the start of the array, there is a very noticeable jump in the scroll position. I tried multiple approaches to smooth this out but this is something I have been unable to overcome. Any suggestions on how this could be made more smooth in terms of the scrolling experience?

kiranjholla commented 7 years ago

Turns out that the issue causing the "jump" was my code and not anything to do with the library. I have updated the example at https://jsfiddle.net/kjholla/8tytptbb/ and it now works fine.

However, the solution still involves modifying the startindex and endindex that is calculated by the vs-repeat directive. It would be great to know if there is a better way to do this.