{"id":14990338,"url":"https://github.com/amphiluke/handy-scroll","last_synced_at":"2025-04-06T10:15:10.705Z","repository":{"id":47757023,"uuid":"143885326","full_name":"Amphiluke/handy-scroll","owner":"Amphiluke","description":"Handy dependency-free floating scrollbar web component","archived":false,"fork":false,"pushed_at":"2025-03-01T15:51:04.000Z","size":5504,"stargazers_count":32,"open_issues_count":0,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T10:14:38.195Z","etag":null,"topics":["javascript","scrollbar","user-interface","web-component","widget"],"latest_commit_sha":null,"homepage":"https://amphiluke.github.io/handy-scroll/","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/Amphiluke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2018-08-07T14:30:28.000Z","updated_at":"2025-03-01T10:12:18.000Z","dependencies_parsed_at":"2023-01-30T20:20:26.579Z","dependency_job_id":"7e161053-3f36-45d1-8aab-7813c112f6a4","html_url":"https://github.com/Amphiluke/handy-scroll","commit_stats":{"total_commits":67,"total_committers":4,"mean_commits":16.75,"dds":"0.17910447761194026","last_synced_commit":"58b5cc5a6493772c6341381b390d6feccce49bac"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Amphiluke%2Fhandy-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Amphiluke%2Fhandy-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Amphiluke%2Fhandy-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Amphiluke%2Fhandy-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Amphiluke","download_url":"https://codeload.github.com/Amphiluke/handy-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464227,"owners_count":20942970,"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":["javascript","scrollbar","user-interface","web-component","widget"],"created_at":"2024-09-24T14:19:54.806Z","updated_at":"2025-04-06T10:15:10.683Z","avatar_url":"https://github.com/Amphiluke.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# handy-scroll\n\nHandy dependency-free floating scrollbar web component.\n\n## Synopsis\n\nhandy-scroll is a dependency-free web component which can be used to solve the problem of scrolling lengthy containers horizontally when those containers don’t fit into the viewport. The component is just a scrollbar which is attached at the bottom of the container’s visible area. It doesn’t get out of sight when the page is scrolled, thereby making horizontal scrolling of the container much handier.\n\n\u003e [!NOTE]\n\u003e Current version of the component targets modern browsers only. If you need to support older browser versions, please stick to the former implementation [handy-scroll@1.x](https://github.com/Amphiluke/handy-scroll/tree/v1).\n\n## Installation and import\n\nIf you use a bundler in your project, install handy-scroll as a dependency:\n\n```shell\nnpm install handy-scroll\n```\n\nNow you may import it wherever it’s needed:\n\n```javascript\nimport \"handy-scroll\";\n```\n\nIf you don’t use bundlers, just import the component as a module in your HTML files:\n\n```html\n\u003cscript type=\"module\" src=\"https://esm.run/handy-scroll\"\u003e\u003c/script\u003e\n```\n\nor in your ES modules:\n\n```javascript\nimport \"https://esm.run/handy-scroll\";\n```\n\n## Standard usage\n\nDrop the custom element `\u003chandy-scroll\u003e` where you need in your markup and link the component to the horizontally-scrollable target using the `owner` attribute:\n\n```html\n\u003cdiv id=\"horizontally-scrollable\"\u003e\n  \u003c!-- Horizontally wide contents --\u003e\n\u003c/div\u003e\n\u003chandy-scroll owner=\"horizontally-scrollable\"\u003e\u003c/handy-scroll\u003e\n```\n\n## Custom viewport element\n\nStandard use case above implies that handy-scroll will stick to the bottom of the browser window viewport. If instead you want to attach a floating scrollbar at the bottom of your custom scrollable “viewport” (e.g. a scrollable modal popup), then you need to link the component to your custom viewport element using the `viewport` attribute:\n\n```html\n\u003cdiv id=\"custom-viewport\"\u003e\n  \u003cdiv id=\"horizontally-scrollable\"\u003e\n    \u003c!-- Horizontally wide contents --\u003e\n  \u003c/div\u003e\n  \u003chandy-scroll owner=\"horizontally-scrollable\" viewport=\"custom-viewport\"\u003e\u003c/handy-scroll\u003e\n\u003c/div\u003e\n```\n\n## API\n\n### `HandyScroll.prototype.update()`\n\nhandy-scroll automatically tracks viewport changes in order to keep the component’s size, position and visibility in sync with the owner’s metrics. However there can be some cases when you’ll need to trigger the component update programmatically (e.g. after some changes in DOM). To do so, just call the method `update()` on the specific `\u003chandy-scroll\u003e` element:\n\n```javascript\ndocument.getElementById(\"my-handy-scroll\").update();\n```\n\n### `HandyScroll.prototype.owner`\n\nReflects the value of the `owner` attribute, which in turn should reference the `id` attribute of the horizontally-scrollable container (owner).\n\n### `HandyScroll.prototype.viewport`\n\nReflects the value of the `viewport` attribute, which (if present) should reference the `id` attribute of the element serving as custom viewport.\n\n## Live demos\n\nCheck out some usage demos [here](https://amphiluke.github.io/handy-scroll/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famphiluke%2Fhandy-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famphiluke%2Fhandy-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famphiluke%2Fhandy-scroll/lists"}