{"id":16788787,"url":"https://github.com/markmead/alpinejs-scroll-amount","last_synced_at":"2025-07-09T11:07:19.627Z","repository":{"id":98519304,"uuid":"559215985","full_name":"markmead/alpinejs-scroll-amount","owner":"markmead","description":"Track the users scroll position and their progress on the page 🤿","archived":false,"fork":false,"pushed_at":"2025-03-07T08:14:46.000Z","size":22,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-10T23:30:19.471Z","etag":null,"topics":["alpine-js","alpinejs","alpinejs-plugin","alpinejs-scroll","javascript-scroll"],"latest_commit_sha":null,"homepage":"https://js.hyperui.dev/examples/utility-scroll-amount","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/markmead.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,"zenodo":null}},"created_at":"2022-10-29T12:28:35.000Z","updated_at":"2025-03-07T08:14:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"440379aa-f149-4e50-adb7-9eb50324eaa5","html_url":"https://github.com/markmead/alpinejs-scroll-amount","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"markmead/alpinejs-plugin-template","purl":"pkg:github/markmead/alpinejs-scroll-amount","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-scroll-amount","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-scroll-amount/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-scroll-amount/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-scroll-amount/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmead","download_url":"https://codeload.github.com/markmead/alpinejs-scroll-amount/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-scroll-amount/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264446715,"owners_count":23609632,"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":["alpine-js","alpinejs","alpinejs-plugin","alpinejs-scroll","javascript-scroll"],"created_at":"2024-10-13T08:24:46.912Z","updated_at":"2025-07-09T11:07:19.606Z","avatar_url":"https://github.com/markmead.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alpine JS Scroll Amount\n\nTrack the users scroll position and their progress on the page 🤿\n\n## Install\n\n### With a CDN\n\n```html\n\u003cscript\n  defer\n  src=\"https://unpkg.com/alpinejs-scroll-amount@latest/dist/scroll-amount.min.js\"\n\u003e\u003c/script\u003e\n\n\u003cscript defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"\u003e\u003c/script\u003e\n```\n\n### With a Package Manager\n\n```shell\nyarn add -D alpinejs-scroll-amount\n\nnpm install -D alpinejs-scroll-amount\n```\n\n```js\nimport Alpine from 'alpinejs'\nimport scrollAmount from 'alpinejs-scroll-amount'\n\nAlpine.plugin(scrollAmount)\n\nAlpine.start()\n```\n\n## Example\n\n```html\n\u003cdiv\n  x-data=\"{ scrollPos: {} }\"\n  x-init=\"scrollPos = $scrollAmount\"\n  x-on:scroll.window=\"scrollPos = $scrollAmount\"\n\u003e\n  \u003cspan\n    class=\"h-px bg-green-500\"\n    :class=\"{ 'bg-green-600': scrollPos.atEnd }\"\n    :style=\"{ width: `${scrollPos.scrollPercent}%` }\"\n  \u003e\n  \u003c/span\u003e\n\n  \u003carticle\u003e ... \u003c/article\u003e\n\u003c/div\u003e\n```\n\nThis is a basic example of showing a progress bar based on the user scroll.\n\n### Data Returned\n\n```js\nreturn {\n  scrollPx: 0,\n  scrollPercent: 0,\n  atStart: true / false,\n  atEnd: true / false,\n}\n```\n\n## Stats\n\n![](https://img.shields.io/bundlephobia/min/alpinejs-scroll-amount)\n![](https://img.shields.io/npm/v/alpinejs-scroll-amount)\n![](https://img.shields.io/npm/dt/alpinejs-scroll-amount)\n![](https://img.shields.io/github/license/markmead/alpinejs-scroll-amount)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-scroll-amount","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmead%2Falpinejs-scroll-amount","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-scroll-amount/lists"}