{"id":20054386,"url":"https://github.com/divriots/infini-scroll","last_synced_at":"2025-03-02T09:18:12.852Z","repository":{"id":42051577,"uuid":"401655464","full_name":"divriots/infini-scroll","owner":"divriots","description":"Webcomponent that infinitely scrolls through a list of nodes in horizontal direction.","archived":false,"fork":false,"pushed_at":"2022-04-15T09:23:14.000Z","size":35,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-01T14:16:51.382Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://webcomponents.dev/view/LWuupe7NoXwlpP9BiJoG","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/divriots.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":"2021-08-31T10:02:23.000Z","updated_at":"2025-02-05T02:08:30.000Z","dependencies_parsed_at":"2022-08-12T03:30:43.509Z","dependency_job_id":null,"html_url":"https://github.com/divriots/infini-scroll","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Finfini-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Finfini-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Finfini-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Finfini-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/divriots","download_url":"https://codeload.github.com/divriots/infini-scroll/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241482122,"owners_count":19969853,"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-11-13T12:40:16.775Z","updated_at":"2025-03-02T09:18:12.829Z","avatar_url":"https://github.com/divriots.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Infini Scroll\n\n\u003cp\u003e\n  \u003ca href=\"https://divRIOTS.com\"\u003eBrought to you by\u003cbr/\u003e\u003c/a\u003e\n  \u003ca href=\"https://divRIOTS.com#gh-light-mode-only\"\u003e\n    \u003cimg width=\"150\" height=\"40\" src=\"https://divRIOTS.com/divriots.svg\" alt=\"‹div›RIOTS\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://divRIOTS.com#gh-dark-mode-only\"\u003e\n    \u003cimg width=\"150\" height=\"40\" src=\"https://divRIOTS.com/divriots-dark.svg\" alt=\"‹div›RIOTS\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nWebcomponent that infinitely scrolls through a list of nodes in horizontal direction.\n\n0 dependencies, \u003c 250 lines of JS\n\n\u003e Note that in general for most things there are better and more accessible interaction patterns than carousels.\n\u003e Do not use it for things that you expect your users to actually interact with. \n\u003e This is intended as a show-only reel and **individual items will not be accessible**, \n\u003e my advise is to add an aria-label on the infini-scroll and make it focusable, \n\u003e to tell users with impaired vision what the reel is displaying.\n\u003e https://shouldiuseacarousel.com/\n\n## Features\n\n- Scrolls infinitely by moving nodes in DOM when needed\n- Horizontal scroll (shift + mousewheel) interrupts the auto scroll and allows user control\n- Click drag interrupts the auto scroll and allows user control\n- Mobile drag gesture interrupts the auto scroll and allows user control\n\n## Attributes\n\n- `container-height`, 150 by default. Set this to the total height of one or multiple nodes in case you want multiple rows, in pixels.\n- `box-width`, 150 by default. Set this to the total width in pixels (including margin, border etc.) of one node.\n- `row-amount`, 1 by default, but you may want more rows. Make sure to adjust this along with the `container-height` attribute so that the amount of rows does fit within the container height.\n- `scroll-interval`, 1 by default, interval in milliseconds to scroll\n- `scroll-amount`, 1 by default, amount of pixels to scroll per interval, Firefox does not support floating numbers here!\n- `resume-time`, 2000 by default time until resuming the auto scroll after user interaction has stopped\n- `drag-speed`, default 4, increase to make dragging slide the list faster\n- `reverse`, auto scroll goes in reverse direction\n- `follow-user-direction`, by setting this attribute, the infini-scroll will switch to the user's last manual scroll direction\n\n## Future\n\n- Allow box width to be dynamic (vary per box, compute automatically), remove box-width attr\n- Make click drag play well with velocity and release, similar to native mobile drag gestures\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Finfini-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivriots%2Finfini-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Finfini-scroll/lists"}