{"id":22356840,"url":"https://github.com/ayamflow/virtual-scroll","last_synced_at":"2025-05-14T11:09:09.207Z","repository":{"id":24279669,"uuid":"27674273","full_name":"ayamflow/virtual-scroll","owner":"ayamflow","description":"A low-level library to create custom scroll behaviors.","archived":false,"fork":false,"pushed_at":"2024-10-28T01:12:36.000Z","size":61,"stargazers_count":505,"open_issues_count":1,"forks_count":42,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-12T11:42:54.589Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ayamflow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-12-07T15:20:44.000Z","updated_at":"2025-05-09T14:09:34.000Z","dependencies_parsed_at":"2024-06-18T12:36:36.662Z","dependency_job_id":"844262f4-1ff7-4b41-b9fe-ce95c7086f91","html_url":"https://github.com/ayamflow/virtual-scroll","commit_stats":{"total_commits":49,"total_committers":8,"mean_commits":6.125,"dds":"0.24489795918367352","last_synced_commit":"89601f16532efc0bd3a8b650dd7ed89532b010b9"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fvirtual-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fvirtual-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fvirtual-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayamflow%2Fvirtual-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayamflow","download_url":"https://codeload.github.com/ayamflow/virtual-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129488,"owners_count":22019628,"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-12-04T14:12:11.375Z","updated_at":"2025-05-14T11:09:09.180Z","avatar_url":"https://github.com/ayamflow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"virtual-scroll\n=====\n\nA **2kb gzipped** low-level library to create custom scrollers with touch and keyboard support.\nThis is heavily inspired by Bartek Drozdz VirtualScroll util. See his [article](http://www.everyday3d.com/blog/index.php/2014/08/18/smooth-scrolling-with-virtualscroll/) for reference.\n\n### Features\n- Can create multiple instances with different elements as targets\n- Let you do the actual scrolling logic: use CSS Transforms, WebGL animation or anything you like\n- Native arrow keys support and shift/space support mimicking default browser behaviour\n\nFor high-level libraries based off **virtual-scroll**, check [locomotive-scroll](https://github.com/locomotivemtl/locomotive-scroll) or [smooth-scrolling](https://github.com/baptistebriel/smooth-scrolling).\n\n### Installation\n```\nnpm i virtual-scroll -S\n```\n\n### Usage \u0026 API\n#### Constructor\n- `new VirtualScroll(options)`\n  - `el`: the target element for mobile touch events. *Defaults to window.*\n  - `mouseMultiplier`: General multiplier for all mousewheel (including Firefox). *Default to 1.*\n  - `touchMultiplier`: Mutiply the touch action by this modifier to make scroll faster than finger movement. *Defaults to 2.*\n  - `firefoxMultiplier`: Firefox on Windows needs a boost, since scrolling is very slow. *Defaults to 15.*\n  - `keyStep`: How many pixels to move with each key press. *Defaults to 120.*\n  - `preventTouch`: If true, automatically call `e.preventDefault` on touchMove. *Defaults to false.*\n  - `unpreventTouchClass`: Elements with this class won't `preventDefault` on touchMove. For instance, useful for a scrolling text inside a VirtualScroll-controled element. *Defaults to `vs-touchmove-allowed`*.\n  - `passive`: if used, will use [passive events declaration](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners) for the wheel and touch listeners. Can be true or false. *Defaults to undefined.*\n  - `useKeyboard`: if true, allows to use arrows to navigate, and space to jump from one screen. *Defaults to true*\n  - `useTouch`: if true, uses touch events to simulate scrolling. *Defaults to true*\n\n#### Methods\n- `instance.on(callback, context)`\nListen to the scroll event using the specified callback and optional context.\n\n- `instance.off(callback, context)`\nRemove the listener.\n\n- `instance.destroy()`\nRemove all events and unbind the DOM listeners.\n\nEvents note:\nEach instance will listen only once to any DOM listener. These listener are enabled/disabled automatically. However, it's a good practice to always call `destroy()` on your VirtualScroll instance, especially if you are working with a SPA.\n\n#### Event\nWhen a scroll event happens, all the listeners attached with *instance.on(callback, context)* will get triggered with the following event:\n```js\n{\n\tx, // total distance scrolled on the x axis\n\ty, // total distance scrolled on the y axis\n\tdeltaX, // distance scrolled since the last event on the x axis\n\tdeltaY, // distance scrolled since the last event on the y axis\n\toriginalEvent // the native event triggered by the pointer device or keyboard\n}\n```\n\n### Example\n```js\nimport VirtualScroll from 'virtual-scroll'\n\nconst scroller = new VirtualScroll()\nscroller.on(event =\u003e {\n\twrapper.style.transform = `translateY(${event.y}px)`\n})\n\n```\n\n### License\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayamflow%2Fvirtual-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayamflow%2Fvirtual-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayamflow%2Fvirtual-scroll/lists"}