{"_id":"virtual-scroll-list","_rev":"6-9728006b74f03d752d994b14f410ab7e","name":"virtual-scroll-list","description":"Think of it as UITableView for the DOM elements","dist-tags":{"latest":"0.7.3"},"versions":{"0.7.0":{"name":"virtual-scroll-list","version":"0.7.0","description":"Think of it as UITableView for the DOM elements","main":"webpack.config.js","scripts":{"prepublish":"in-publish && npm run build || not-in-publish","postpublish":"npm run clean","clean":"rimraf dist","build":"npm run clean && mkdirp dist && babel src --out-dir dist","build:umd":"webpack src/VirtualScroll.js dist/virtual-scroll.js && NODE_ENV=production webpack src/VirtualScroll.js dist/virtual-scroll.min.js","lint":"eslint src","test":"NODE_ENV=test mocha --compilers js:babel-register","test:watch":"NODE_ENV=test mocha --compilers js:babel-register --watch","test:cov":"babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"repository":{"type":"git","url":"git+https://github.com/Khaledgarbaya/virtual-scroll.git"},"keywords":["virtual-scroll"],"author":{"name":"Khaled Garbaya","email":"kgarbaya@gmail.com"},"license":"MIT","devDependencies":{"babel-cli":"^6.4.0","babel-core":"^6.3.17","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","babel-polyfill":"^6.3.14","babel-preset-es2015":"^6.3.13","babel-preset-stage-0":"^6.3.13","babel-register":"^6.3.13","chai":"^3.4.1","cz-conventional-changelog":"^1.1.6","eslint":"^1.10.3","eslint-config-airbnb":"^2.1.0","expect":"^1.6.0","in-publish":"^2.0.0","isparta":"^3.0.3","mocha":"^2.3.4","mock-browser":"^0.92.11","rimraf":"^2.5.2","semantic-release":"^4.3.5","semantic-release-cli":"^1.4.1","webpack":"^1.9.6","webpack-dev-server":"^1.8.2"},"files":["dist"],"dependencies":{"invariant":"^2.0.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"ef6f05adf697cf7371dbd9ce37d5fa08ac7270bb","bugs":{"url":"https://github.com/Khaledgarbaya/virtual-scroll/issues"},"homepage":"https://github.com/Khaledgarbaya/virtual-scroll#readme","_id":"virtual-scroll-list@0.7.0","_shasum":"8108c39572e9c836cfdb3230a434c30ca9e38422","_from":".","_npmVersion":"3.7.3","_nodeVersion":"5.9.1","_npmUser":{"name":"kgarbaya","email":"kgarbaya@gmail.com"},"dist":{"shasum":"8108c39572e9c836cfdb3230a434c30ca9e38422","tarball":"https://registry.npmjs.org/virtual-scroll-list/-/virtual-scroll-list-0.7.0.tgz","integrity":"sha512-crnKddVr+G0OZwJFpeeVAOFugCDoeEj0aqjMwrxJfs/gAdutEr7Mscqcerf4NU2z0rgRv4FxA3oOtz/LS79Zqw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlbp4U0hdTFZYW9XGqneQ33kFE88cV12HOmd0cLqwVUAiBwuqSxIGjFghhCt7HUlIrwbcTQ0kyAh0nmUFJwDtbRFg=="}]},"maintainers":[{"name":"kgarbaya","email":"kgarbaya@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/virtual-scroll-list-0.7.0.tgz_1469385152845_0.5072695806156844"}},"0.7.1":{"name":"virtual-scroll-list","version":"0.7.1","description":"Think of it as UITableView for the DOM elements","main":"webpack.config.js","scripts":{"prepublish":"in-publish && npm run build || not-in-publish","postpublish":"npm run clean","clean":"rimraf dist","build":"npm run clean && mkdirp dist && babel src --out-dir dist","build:umd":"webpack src/VirtualScroll.js dist/virtual-scroll.js && NODE_ENV=production webpack src/VirtualScroll.js dist/virtual-scroll.min.js","lint":"eslint src","test":"NODE_ENV=test mocha --compilers js:babel-register","test:watch":"NODE_ENV=test mocha --compilers js:babel-register --watch","test:cov":"babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"repository":{"type":"git","url":"git+https://github.com/Khaledgarbaya/virtual-scroll.git"},"keywords":["virtual-scroll"],"author":{"name":"Khaled Garbaya","email":"kgarbaya@gmail.com"},"license":"MIT","devDependencies":{"babel-cli":"^6.4.0","babel-core":"^6.3.17","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","babel-polyfill":"^6.3.14","babel-preset-es2015":"^6.3.13","babel-preset-stage-0":"^6.3.13","babel-register":"^6.3.13","chai":"^3.4.1","cz-conventional-changelog":"^1.1.6","eslint":"^1.10.3","eslint-config-airbnb":"^2.1.0","expect":"^1.6.0","in-publish":"^2.0.0","isparta":"^3.0.3","mocha":"^2.3.4","mock-browser":"^0.92.11","rimraf":"^2.5.2","semantic-release":"^4.3.5","semantic-release-cli":"^1.4.1","webpack":"^1.9.6","webpack-dev-server":"^1.8.2"},"files":["dist"],"dependencies":{"invariant":"^2.0.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"f4da0557a2e011fcde6a6cbe8488c24e9165cbd8","bugs":{"url":"https://github.com/Khaledgarbaya/virtual-scroll/issues"},"homepage":"https://github.com/Khaledgarbaya/virtual-scroll#readme","_id":"virtual-scroll-list@0.7.1","_shasum":"81b8cafa10342a77501ccfe41a5baae83e89ae7e","_from":".","_npmVersion":"3.10.5","_nodeVersion":"5.9.1","_npmUser":{"name":"kgarbaya","email":"kgarbaya@gmail.com"},"dist":{"shasum":"81b8cafa10342a77501ccfe41a5baae83e89ae7e","tarball":"https://registry.npmjs.org/virtual-scroll-list/-/virtual-scroll-list-0.7.1.tgz","integrity":"sha512-XnQ1O0cg/zjhH3kEEUV0JUshacqXnVT64u1M2VH9d1fYk0pekz/+KGo1PMZCX6XnNH3VnqlKsLZ4Rz21J7APAg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYTQ3HrZYp6jM3We3inYsMFnjBVDPWgqiZylH3ddT4QgIgHj7fKfz9dTv1QNAQe0OVYJT5qMokNhdC6745igMYG+Q="}]},"maintainers":[{"name":"kgarbaya","email":"kgarbaya@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/virtual-scroll-list-0.7.1.tgz_1469387622120_0.09269817871972919"}},"0.7.2":{"name":"virtual-scroll-list","version":"0.7.2","description":"Think of it as UITableView for the DOM elements","main":"webpack.config.js","scripts":{"prepublish":"in-publish && npm run build || not-in-publish","postpublish":"npm run clean","clean":"rimraf dist","build":"npm run clean && mkdirp dist && babel src --out-dir dist","build:umd":"webpack src/VirtualScroll.js dist/virtual-scroll.js && NODE_ENV=production webpack src/VirtualScroll.js dist/virtual-scroll.min.js","lint":"eslint src","test":"NODE_ENV=test mocha --compilers js:babel-register","test:watch":"NODE_ENV=test mocha --compilers js:babel-register --watch","test:cov":"babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"repository":{"type":"git","url":"git+https://github.com/Khaledgarbaya/virtual-scroll.git"},"keywords":["virtual-scroll"],"author":{"name":"Khaled Garbaya","email":"kgarbaya@gmail.com"},"license":"MIT","devDependencies":{"babel-cli":"^6.4.0","babel-core":"^6.3.17","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","babel-polyfill":"^6.3.14","babel-preset-es2015":"^6.3.13","babel-preset-stage-0":"^6.3.13","babel-register":"^6.3.13","chai":"^3.4.1","cz-conventional-changelog":"^1.1.6","eslint":"^1.10.3","eslint-config-airbnb":"^2.1.0","expect":"^1.6.0","in-publish":"^2.0.0","isparta":"^3.0.3","mocha":"^2.3.4","mock-browser":"^0.92.11","rimraf":"^2.5.2","semantic-release":"^4.3.5","semantic-release-cli":"^1.4.1","webpack":"^1.9.6","webpack-dev-server":"^1.8.2"},"files":["dist"],"dependencies":{"invariant":"^2.0.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"87ffda3994ad1c8192d1ab3f2a84198b1c71e7c5","bugs":{"url":"https://github.com/Khaledgarbaya/virtual-scroll/issues"},"homepage":"https://github.com/Khaledgarbaya/virtual-scroll#readme","_id":"virtual-scroll-list@0.7.2","_shasum":"900f15f9586f63e412983583b5be54aacf98fa78","_from":".","_npmVersion":"3.10.5","_nodeVersion":"6.3.1","_npmUser":{"name":"kgarbaya","email":"kgarbaya@gmail.com"},"dist":{"shasum":"900f15f9586f63e412983583b5be54aacf98fa78","tarball":"https://registry.npmjs.org/virtual-scroll-list/-/virtual-scroll-list-0.7.2.tgz","integrity":"sha512-8I9ghDTi395cSEsyNrncI931opmcLPr0UQ6lpC6nijsnxbmJTt4zx2tqzhli13VXaiMds0ghptpGCStRXAjqwg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDMkQ84eEL5iSpfGAsJQ/DMGhnnAUx+vAYRVIkfD48/cAiEA3gbH8bbBHhw9UN+7xXnslmbNoUGcAdAKde0SmZYJW3g="}]},"maintainers":[{"name":"kgarbaya","email":"kgarbaya@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/virtual-scroll-list-0.7.2.tgz_1469387921606_0.03416038490831852"}},"0.7.3":{"name":"virtual-scroll-list","version":"0.7.3","description":"Think of it as UITableView for the DOM elements","main":"webpack.config.js","scripts":{"prepublish":"in-publish && npm run build || not-in-publish","postpublish":"npm run clean","clean":"rimraf dist","build":"npm run clean && mkdirp dist && babel src --out-dir dist","build:umd":"webpack src/VirtualScroll.js dist/virtual-scroll.js && NODE_ENV=production webpack src/VirtualScroll.js dist/virtual-scroll.min.js","lint":"eslint src","test":"NODE_ENV=test mocha --compilers js:babel-register","test:watch":"NODE_ENV=test mocha --compilers js:babel-register --watch","test:cov":"babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"repository":{"type":"git","url":"git+https://github.com/Khaledgarbaya/virtual-scroll.git"},"keywords":["virtual-scroll"],"author":{"name":"Khaled Garbaya","email":"kgarbaya@gmail.com"},"license":"MIT","devDependencies":{"babel-cli":"^6.4.0","babel-core":"^6.3.17","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","babel-polyfill":"^6.3.14","babel-preset-es2015":"^6.3.13","babel-preset-stage-0":"^6.3.13","babel-register":"^6.3.13","chai":"^3.4.1","cz-conventional-changelog":"^1.1.6","eslint":"^1.10.3","eslint-config-airbnb":"^2.1.0","expect":"^1.6.0","in-publish":"^2.0.0","isparta":"^3.0.3","mocha":"^2.3.4","mock-browser":"^0.92.11","rimraf":"^2.5.2","semantic-release":"^4.3.5","semantic-release-cli":"^1.4.1","webpack":"^1.9.6","webpack-dev-server":"^1.8.2"},"files":["dist"],"dependencies":{"invariant":"^2.0.0"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"c17874dfcc8dea9b8f7ab8c38e0a47739e526158","bugs":{"url":"https://github.com/Khaledgarbaya/virtual-scroll/issues"},"homepage":"https://github.com/Khaledgarbaya/virtual-scroll#readme","_id":"virtual-scroll-list@0.7.3","_shasum":"464a818b4d007d70def0d3f1b0bc5ed9b38c4374","_from":".","_npmVersion":"3.10.5","_nodeVersion":"6.3.1","_npmUser":{"name":"kgarbaya","email":"kgarbaya@gmail.com"},"dist":{"shasum":"464a818b4d007d70def0d3f1b0bc5ed9b38c4374","tarball":"https://registry.npmjs.org/virtual-scroll-list/-/virtual-scroll-list-0.7.3.tgz","integrity":"sha512-sFfrtxYHIyxZSoOKCu+hjGNVZANPE5s9W4xkXiWBGgJo1SBJTNNF+LPBVpajHOLhYR9QuvEEKInifyVeU3tXtg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+u3UgmcxKOfeHCGkgM9IDccJA8b0bsRmL2qCDJf5DNwIhAOrxrrg+IXGRo4OAHhBh1fO5nTjfJbK+BTVKqt24LjmD"}]},"maintainers":[{"name":"kgarbaya","email":"kgarbaya@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/virtual-scroll-list-0.7.3.tgz_1469388271929_0.9698531504254788"}}},"readme":"Virtual Scroll\n=========================\n\n[![Build Status](https://travis-ci.org/Khaledgarbaya/virtual-scroll.svg?branch=master)](https://travis-ci.org/Khaledgarbaya/virtual-scroll)\n\n```\n            _    ___      __              __   _____                 ____\n            | |  / (_)____/ /___  ______ _/ /  / ___/______________  / / /\n            | | / / / ___/ __/ / / / __ `/ /   \\__ \\/ ___/ ___/ __ \\/ / /\n            | |/ / / /  / /_/ /_/ / /_/ / /   ___/ / /__/ /  / /_/ / / /  \n            |___/_/_/   \\__/\\__,_/\\__,_/_/   /____/\\___/_/   \\____/_/_/\n\n```\nVirtual list that is able to render infinite ammount of DOm element using UITableView techniques and. This is already been done in a lot of ways but Here I am trying to use CSS translate to scroll the container which more performant than changing the top.\nPaul Irish made a great benchmark here http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/\n## Example Usage\n### Getting the library\n```\ngit clone https://github.com/Khaledgarbaya/virtual-scroll.git\n```\n```\ncd virtual-scroll\n```\n```\nnpm install\n```\n### Code\n```javascript\n// BASIC INITIALIZATION\n\nimport VirtualScroll from 'VirtualScroll';\n\n\nlet listSource = [];\nfor (let i = 0; i < 3000; i++) listSource.push({ itemId: i });\n\nlet virtualScroll1 = new VirtualScroll({\n  // DOMnode the list will be renderd inside\n  root: document.getElementsByClassName('NAME_THE_CONTAINER_WHATEVER_YOU_LIKE')[0],\n  itemHeight: 50,\n  // ARRAY containg all the objects to be displayed inside the list\n  source: listSource,\n\n  /**\n   * FUNCTION to be called while creating a single item\n   *\n   * @param  {object}  itemNodes       empty object provided by the list logic\n   * @param  {DOMnode} itemContainer   item container provided by the list logic\n   */\n  createItemFn: (itemNodes, itemContainer) => {\n    // EXAMPLE\n    // itemNodes.text1 = document.createElement('span');\n    // itemContainer.appendChild(itemNodes.text1);\n  },\n\n  /**\n   * FUNCTION to be called while updating a single item\n   *\n   * @param  {object}  itemNodes       object previously filled by createItemFn()\n   * @param  {DOMnode} itemContainer   item container provided by the list logic\n   * @param  {object}  itemData        object inside listSource array at the current index\n   */\n  updateItemFn: (itemNodes, itemContainer, itemData) => {\n    // EXAMPLE\n    // update itemNodes.text1 with itemData.itemId\n  }\n});\n\n```\n## Improvement/TODO\n\n* Documentation\n* More Unit tests\n* Adding Scrolling using mouse wheel\n* Adding e2e tests\n* handling images (only load the visible items)\n","maintainers":[{"name":"kgarbaya","email":"kgarbaya@gmail.com"}],"time":{"modified":"2022-06-28T17:40:39.177Z","created":"2016-07-24T18:32:34.621Z","0.7.0":"2016-07-24T18:32:34.621Z","0.7.1":"2016-07-24T19:13:44.106Z","0.7.2":"2016-07-24T19:18:43.132Z","0.7.3":"2016-07-24T19:24:33.753Z"},"homepage":"https://github.com/Khaledgarbaya/virtual-scroll#readme","keywords":["virtual-scroll"],"repository":{"type":"git","url":"git+https://github.com/Khaledgarbaya/virtual-scroll.git"},"author":{"name":"Khaled Garbaya","email":"kgarbaya@gmail.com"},"bugs":{"url":"https://github.com/Khaledgarbaya/virtual-scroll/issues"},"license":"MIT","readmeFilename":"README.md"}