		{
		"name": "dynamic-virtual-scroller",
		"version": "1.2.21",
		"description": "A virtual scroller for the web that can handle dynamic row and column sizes.",
		"main": "virtual-scroller.js",
		"directories": {
		"example": "examples"
		},
		"dependencies": {
		"lodash": "^4.9.0"
		},
		"devDependencies": {
		"describefn": "^1.0.1"
		},
		"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
		},
		"repository": {
		"type": "git",
		"url": "git+https://github.com/deje1011/dynamic-virtual-scroller.git"
		},
		"author": "Jesse Desaever",
		"license": "ISC",
		"bugs": {
		"url": "https://github.com/deje1011/dynamic-virtual-scroller/issues"
		},
		"homepage": "https://github.com/deje1011/dynamic-virtual-scroller#readme"
		"name": "dynamic-virtual-scroller",
		"version": "2.0.0",
		"description": "A virtual scroller for the web that can handle dynamic row and column sizes.",
		"main": "virtual-scroller.js",
		"directories": {
		"example": "examples"
		},
		"dependencies": {
		"lodash": "^4.9.0"
		},
		"devDependencies": {
		"babel-core": "^6.24.1",
		"babel-loader": "^7.0.0",
		"babel-preset-env": "^1.4.0",
		"describefn": "^1.0.1",
		"webpack": "^2.5.1"
		},
		"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build:css": "cp ./src/css/virtual-scroller.css ./dist/virtual-scroller.css",
		"build:js": "webpack",
		"build": "npm run build:css && npm run build:js",
		"watch:js": "webpack --watch",
		"dev": "npm run build:css && npm run watch:js"
		},
		"repository": {
		"type": "git",
		"url": "git+https://github.com/deje1011/dynamic-virtual-scroller.git"
		},
		"author": "Jesse Desaever",
		"license": "ISC",
		"bugs": {
		"url": "https://github.com/deje1011/dynamic-virtual-scroller/issues"
		},
		"homepage": "https://github.com/deje1011/dynamic-virtual-scroller#readme"
		}

README.md

		Hi Github!

		VirtualScroller requires jquery and lodash to be loaded beforehand.
		More documentation is coming soon...
		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

virtual-scroller.css

virtual-scroller.js

examples/config.html