dynamic-virtual-scroller

Hi Github!

VirtualScroller requires jquery and lodash to be loaded beforehand. More documentation is coming soon...

History of this code

Naive approach

First, we tried just using the native scrolling and adding/removing rows when needed. The scroller was also tightly coupled to the data at that point. This solution had a couple of drawbacks:

• The scroller had too much responsibility and got pretty complex because it had to handle data and rendering
• When implementing sticky rows, we noticed that they flicker if we move them via css (translate). Thats because native scrolling was faster than translate.
• Virtual scrolling of columns was not possible in that implementation

Structure: container canvas

Using translate + native scrolling

The next version of the scroller still used native scrolling but didn't render the items in the same container. Instead, we used a scrollContainer in the background that we could bind scroll events on and rendered to a second container that was on top of the other. So scrolling was still native but we moved the items using translate only (sticky and non-sticky). That way there was no more flickering. But unfortunately this solution did not play well with mobile because the events of the canvas-container and the scroll-container conflicted.

Structure: container scrollContainer scrollCanvas canvasContainer [stickyCanvasContainer] canvas

Using only translate

Finally, this version does not use native scrolling at all but instead recreates the behavior using the mousewheel event and then translating the content as if it was scrolled. That way we have total control over the scrolling process and only need one container.

Structure: container [stickyCanvasContainer] canvas