Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

dynamic-virtual-scroller

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dynamic-virtual-scroller

A virtual scroller for the web that can handle dynamic row and column sizes.


Version published
Weekly downloads
24
decreased by-73.63%
Maintainers
1
Weekly downloads
 
Created

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

FAQs

Package last updated on 23 Aug 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts