{"id":13990035,"url":"https://github.com/sergi/virtual-list","last_synced_at":"2025-07-19T08:02:33.490Z","repository":{"id":43913950,"uuid":"10016785","full_name":"sergi/virtual-list","owner":"sergi","description":"Scrollable list of DOM elements that can hold an unlimited amount of rows without breaking a sweat","archived":false,"fork":false,"pushed_at":"2021-12-02T16:51:58.000Z","size":126,"stargazers_count":269,"open_issues_count":10,"forks_count":33,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-07-12T18:21:49.683Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sergi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-12T17:17:08.000Z","updated_at":"2025-06-10T02:44:53.000Z","dependencies_parsed_at":"2022-09-11T04:31:39.272Z","dependency_job_id":null,"html_url":"https://github.com/sergi/virtual-list","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/sergi/virtual-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergi%2Fvirtual-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergi%2Fvirtual-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergi%2Fvirtual-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergi%2Fvirtual-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sergi","download_url":"https://codeload.github.com/sergi/virtual-list/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergi%2Fvirtual-list/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265904191,"owners_count":23846673,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-09T13:02:17.763Z","updated_at":"2025-07-19T08:02:33.437Z","avatar_url":"https://github.com/sergi.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## Virtual DOM List\n\nThis is a simple component that allows the developer to create very\nlong lists (by list I mean a single column of rows) that perform extremely\nfast. It does so by loading just the part of the list showing up on the viewport, and by optimizing\nthe amount of DOM operations and reflows. It also spends very little memory.\n\nThe list could be done even faster by sacrificing the 'momentum' effect, but I\ndecided to keep it since it is too big of a sacrifice for the sake of speed.\n\n## Installation\n\n    npm install virtual-list\n\nOr if you prefer bower:\n\n    bower install virtual-list\n\nOf course it can also just be added to any JavaScript project since it consists of a\nsingle JavaScript file.\n\n## Usage\n\nEach of the following snippets of code creates a virtual list that holds 1 milion\nrows:\n\n```javascript\n// This will create a scrolling list of 300x300 with 10000 rows. It is necessary to specify\n// how tall each row is by setting the `itemHeight` prpoerty in the config object. In this\n// example, we set up a generator function that will generate each row on demand.\nvar list = new ScrollableList({\n  w: 300,\n  h: 300,\n  itemHeight: 31,\n  totalRows: 10000,\n  generatorFn: function(row) {\n    var el = document.createElement(\"div\");\n    el.innerHTML = \"ITEM \" + row;\n    el.style.borderBottom = \"1px solid red\";\n    el.style.position = \"absolute\"\n    return el;\n  }\n});\ndocument.body.appendChild(list.container)\n\n// The code below will create an array of 10000 DOM elements beforehand and pass them to\n// the list. The Virtual list will then display them on demand. Of course, even if the\n// virtual list is smart about displaying them, this method fills up a lot of memory by\n// creating the elements before-hand.\nvar bigAssList = [];\nfor (var i = 0; i \u003c 10000; i++) {\n  var el = document.createElement(\"div\");\n  el.classList.add(\"item\");\n  el.innerHTML = \"ITEM \" + i;\n  el.style.borderBottom = \"1px solid red\";\n  bigAssList.push(el);\n}\n\nvar list = new ScrollableList({\n  w: 300,\n  h: 300,\n  items: bigAssList,\n  itemHeight: 31\n});\ndocument.body.appendChild(list.container)\n\n// The code below will create an array of 10000 strings beforehand and pass them to\n// the list. The Virtual list will then display them on demand.\nvar bigAssList = [];\nfor (var i = 0; i \u003c 10000; i++)\n  bigAssList.push(\"ITEM \" + i);\n\nvar list = new ScrollableList({\n  w: 300,\n  h: 300,\n  items: bigAssList,\n  itemHeight: 31\n});\ndocument.body.appendChild(list.container)\n```\n\n## Caveats\n\nFirefox has a nasty bug (https://bugzilla.mozilla.org/show_bug.cgi?id=373875)\nthat breaks any attempt of assigning big numerical values to css properties.\nSince the virtual list does exactly that to give the illusion of a very big list\nwithout actually loading the components, you might run into that bug for very big\nlists. Unfortunately, I haven't found a way to work around it yet.\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (C) 2013 Sergi Mansilla\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergi%2Fvirtual-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsergi%2Fvirtual-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergi%2Fvirtual-list/lists"}