Viewport
After the Scroller is initialized, the user gets a scrollable viewport containing real and virtual items. Below is the diagram showing what the virtual scrolling viewport is in terms of the vscroll solution.
The dark blue area represents the visible part of the viewport, which size (Hv) is defined by CSS. The light blue outlets contain rendered but invisible rows because they are out of the viewport. The size of both outlets is defined by the padding setting multiplied by the viewport's size (Hv * padding). White areas above and below are two empty containers emulating the rest of the dataset; their dimensions correspond to virtualized rows that we don’t want to be present in the DOM.
The viewport's outlets can be considered as an intermediate layer that gives the Scroller additional time to fetch and render virtual rows in response to user scrolling. From the DOM's perspective there is no difference between visible (dark blue) and invisible (light blue) elements. This is how the first image might look in the DOM inspector, assuming the item is 20px high:
