{"id":22325762,"url":"https://github.com/kunukn/position-indicator","last_synced_at":"2025-04-12T11:21:58.536Z","repository":{"id":51317428,"uuid":"367053573","full_name":"kunukn/position-indicator","owner":"kunukn","description":null,"archived":false,"fork":false,"pushed_at":"2021-05-19T08:02:25.000Z","size":225,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T06:11:16.266Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/kunukn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-13T13:14:08.000Z","updated_at":"2025-01-08T12:13:00.000Z","dependencies_parsed_at":"2022-09-26T21:40:48.147Z","dependency_job_id":null,"html_url":"https://github.com/kunukn/position-indicator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fposition-indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fposition-indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fposition-indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fposition-indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kunukn","download_url":"https://codeload.github.com/kunukn/position-indicator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248558134,"owners_count":21124224,"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-04T02:13:35.995Z","updated_at":"2025-04-12T11:21:58.515Z","avatar_url":"https://github.com/kunukn.png","language":"Vue","readme":"# Position Indicator\n\n[![npm version](https://img.shields.io/npm/v/position-indicator.svg?style=flat-square)](https://www.npmjs.com/package/position-indicator)\n[![npm downloads](https://img.shields.io/npm/dm/position-indicator.svg?style=flat-square)](https://www.npmjs.com/package/position-indicator)\n[![License](https://badgen.net/github/license/kunukn/position-indicator)](./LICENSE)\n[![Library minified size](https://badgen.net/bundlephobia/min/position-indicator)](https://bundlephobia.com/result?p=position-indicator)\n[![Library minified + gzipped size](https://badgen.net/bundlephobia/minzip/position-indicator)](https://bundlephobia.com/result?p=position-indicator)\n\n## About\n\nMinimal VanillaJS code to know the scroll position of the page with no external dependencies.\n\u003cbr/\u003e\n\nA position indicator that updates on:\n\n- scroll\n- resize\n- body height change\u003cbr/\u003e\n\nIt has been tested on\n\n- Phones (iOS, Android)\n- Tablets (iPadOS, Android)\n- Laptops (Mac, Windows)\n- Modern browsers\n\nIt updates when the devices rotates and if the height changes on interaction.\n\n## Browser Support\n\n| ![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.0.0/chrome/chrome_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.0.0/safari-ios/safari-ios_48x48.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.0.0/firefox/firefox_48x48.png) |\n| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |\n| 60+                                                                                            | 12+                                                                                                    | 60+                                                                                               |\n\n## Demo\n\n\u003ctable style=\"border-spacing: 16px;border-collapse: separate;\"\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eCodesandbox React\u003c/td\u003e\n\u003ctd\u003e\u003cimg width=\"24\" height=\"24\" src=\"ui-library-logo/React-logo.svg\"/\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://0li7c.csb.app/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eView\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/position-indicator-reactjs-0li7c\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eEdit\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eCodesandbox Vue\u003c/td\u003e\n\u003ctd\u003e\u003cimg width=\"24\" height=\"24\" src=\"ui-library-logo/Vue-logo.svg\"/\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://88mtz.csb.app/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eView\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/angry-night-88mtz\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eEdit\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eCodesandbox Angular\u003c/td\u003e\n\u003ctd\u003e\u003cimg width=\"24\" height=\"24\" src=\"ui-library-logo/Angular-logo.svg\"/\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://jgm6g.csb.app/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eView\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/position-indicator-angular-jgm6g\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eEdit\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eCodepen Vue\u003c/td\u003e\n\u003ctd\u003e\u003cimg width=\"24\" height=\"24\" src=\"ui-library-logo/Vue-logo.svg\"/\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://codepen.io/kunukn/full/wvJGzda\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eView\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://codepen.io/kunukn/pen/wvJGzda\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eEdit\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\n## Installation\n\nThis library is published in the NPM registry and can be installed using any compatible package manager.\n\n```sh\nyarn add position-indicator\n\n# For npm, use the command below.\nnpm install position-indicator --save\n```\n\n### Usage\n\n```js\nimport { createPositionIndicator } from 'position-indicator'\n\nlet myOnInitCallback = (data) =\u003e {}\nlet myOnUpdateCallback = (data) =\u003e {}\n\n// where data is:\nlet data = {\n  position /* value between 0 and 1 */,\n  prevPosition /* value between 0 and 1 */,\n  hasUpdated /* if position is different from previous event */,\n  hasScroll /* true or false */,\n  eventType /* scroll, resize, heightChange or init */,\n  eventDate /* Date.now() */,\n}\n\nlet positionIndicator = createPositionIndicator({\n  onInit: myOnInitCallback,\n  onUpdate: myOnUpdateCallback,\n  useResizeListener: true, // optional: default true\n  useResizeObserver: true, // optional: default true\n})\n\npositionIndicator.init()\n\n// Then later when not used anymore\npositionIndicator.destroy()\n```\n\n### Installation from CDN\n\nThis module has an UMD bundle available through JSDelivr and Unpkg CDNs.\n\n```html\n\u003c!-- For UNPKG use the code below. --\u003e\n\u003cscript src=\"https://unpkg.com/position-indicator\"\u003e\u003c/script\u003e\n\n\u003c!-- For JSDelivr use the code below. --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/position-indicator\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  // UMD module is exposed through the \"positionIndicator\" global variable.\n  console.log(positionIndicator)\n\u003c/script\u003e\n```\n\n## Explore the dist files\n\nhttps://unpkg.com/position-indicator/\n\n## Documentation\n\n[Documentation generated from source files by Typedoc](./docs/README.md).\n\n## License\n\nReleased under [MIT License](./LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunukn%2Fposition-indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkunukn%2Fposition-indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunukn%2Fposition-indicator/lists"}