cacheOverflowSize in Detail

in this article, we're going to be expanding on the the concept of CacheOverflowSize. In the documentation it is described like this: 

cacheOverflowSize	When infinite scrolling is active, this says how many rows beyond the current last row the scrolls should allow to scroll. For example, if 200 rows already loaded from server, and overflowSize is 50, the scroll will allow scrolling to row 250. Default is 1.

The documentation uses an example of 200 rows in the cache (let's call these loaded) and an overflow of 50 (let's call these spoofed). 

Now let's consider the scroll-bar as a two-state-toggle; it can either display the the rows at the top(in state A) or bottom (in state B).

The following plunker is intended to illustrate how cacheOverflowSize works:https://plnkr.co/edit/CQP6Izt84MTKixc2

To achieve the effect I described above, please grab the scrollbar and pull it down quickly to the bottom at first load like in the attached gif.

The overflowSize outlines what a user sees in the grid when the scroll is in state B. 

When the overflowSize is set to "0" and the scroll-bar is put into state B (the end of the initially-loaded scroll-bar), the last row the user will see, will be the loaded 200th. Not that this is only with the initial scroll. 

When the overflowSize is set to "50" and the scroll bar is put into state B, The last row the user will see, will be the 250th. In this case, the 250th cell is a spoofed row as it has not yet been loaded. 

In short, it is useful to consider the cacheOverflowSize as a tool that defines the depth of the scrollbar. Where this exceeds the cacheBlockSize, the rows will be spoofed and loaded after scrolling to them.