{"id":44466887,"url":"https://github.com/pldg/scroll-interactions","last_synced_at":"2026-02-12T20:16:56.019Z","repository":{"id":54877887,"uuid":"204522947","full_name":"pldg/scroll-interactions","owner":"pldg","description":"Easy scroll-driven interactions in the browser built on top of IntersectionObserver","archived":false,"fork":false,"pushed_at":"2022-09-27T17:12:08.000Z","size":148,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-04T13:17:13.236Z","etag":null,"topics":["intersect","intersection-observer","scroll","scroll-direction","scroll-event","scrolling","scrollytelling","trigger","viewport"],"latest_commit_sha":null,"homepage":"https://pldg.github.io/scroll-interactions/","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/pldg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://www.paypal.me/lucapoldelmengo"}},"created_at":"2019-08-26T17:06:18.000Z","updated_at":"2023-02-08T17:19:07.000Z","dependencies_parsed_at":"2022-08-14T05:30:51.183Z","dependency_job_id":null,"html_url":"https://github.com/pldg/scroll-interactions","commit_stats":null,"previous_names":["pldg/scrollzzz"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/pldg/scroll-interactions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pldg%2Fscroll-interactions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pldg%2Fscroll-interactions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pldg%2Fscroll-interactions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pldg%2Fscroll-interactions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pldg","download_url":"https://codeload.github.com/pldg/scroll-interactions/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pldg%2Fscroll-interactions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29380407,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T19:05:20.189Z","status":"ssl_error","status_checked_at":"2026-02-12T19:01:44.216Z","response_time":55,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["intersect","intersection-observer","scroll","scroll-direction","scroll-event","scrolling","scrollytelling","trigger","viewport"],"created_at":"2026-02-12T20:16:55.248Z","updated_at":"2026-02-12T20:16:56.013Z","avatar_url":"https://github.com/pldg.png","language":"JavaScript","readme":"# `scroll-interactions`\r\n\r\n## Introduction\r\n\r\nEasy scroll-driven interactions in the browser built on top of [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Set a hidden trigger line in the browser viewport and see how one or more elements relate to it. This package tells you when an element is above, below or intersect the trigger line. If the element intersect the trigger it can also calculate the percent of completion relative to the element's top border.\r\n\r\n## Features\r\n\r\n- Zero dependencies, lightweight (4kb).\r\n- Get browser's scroll direction (downwards or upwards).\r\n- Get element position relative to the trigger line (above, intersect, below).\r\n- Get percent of completion relative to the target element's top border.\r\n- Unobserve target elements.\r\n- Change IntersectionObserver's root (defaults to browser viewport).\r\n- Access the original IntersectionObserver entry elements.\r\n- Disconnect IntersectionObserver.\r\n\r\n## Install\r\n\r\n### NPM\r\n\r\n```sh\r\nnpm install --save scroll-interactions\r\n```\r\n\r\n### CDN\r\n\r\n```html\r\n\u003cscript src=\"https://unpkg.com/scroll-interactions/dist/scroll-interactions.iife.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n## Quick start\r\n\r\n```html\r\n\u003cdiv class=\"box\"\u003ebox1\u003c/div\u003e\r\n\u003cdiv class=\"box\"\u003ebox2\u003c/div\u003e\r\n\u003cdiv class=\"box\"\u003ebox3\u003c/div\u003e\r\n```\r\n\r\n```js\r\nimport scroll_interactions from \"scroll-interactions\";\r\n\r\nconst observe_box = scroll_interactions({\r\n  targets: \".box\",\r\n  trigger: 0.5,\r\n});\r\n\r\nobserve_box\r\n  .init()\r\n  .observe(({ direction, position }) =\u003e {\r\n    // direction: scroll direction\r\n    // position: element position relative to the trigger\r\n  });\r\n```\r\n\r\n## Examples\r\n\r\nTry those [examples](https://pldg.github.io/scroll-interactions/) and inspect their *index.html* source code for more info.\r\n\r\n## API\r\n\r\nGo to [API](api.md) page.\r\n\r\n## How it works\r\n\r\nThe `observe()` method works as callback handler of [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), it fires one time on first page load, then it fires only when a target element enter or exit the trigger line.\r\n\r\nIf `progress: true` and a target element intersect the trigger line, a scroll event listener is added to keep track of `progress`, when the element leave the trigger line the event listener is removed.\r\n\r\nWhen you use `unobserve` option, all targets that has been unobserved will be cached, if scroll-interactions is re-initialize it'll not observe them again (see [*docs/unobserve*](docs/unobserve/index.html) example), you can also empty the cache if needed (read [API](api.md) for reference).\r\n\r\n## Browsers support\r\n\r\nIt works with all [browser that support IntersectionObserver](https://caniuse.com/?search=IntersectionObserver). For older browser make sure to add the official [IntersectionObserver polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) before creating a `scroll_interactions` instance.\r\n\r\n## Notes\r\n\r\nIt works even if the browser is zoomed.\r\n\r\nAt the moment support only vertical scrolling.\r\n\r\nInspired by [scrollama](https://github.com/russellgoldenberg/scrollama/).\r\n","funding_links":["https://www.paypal.me/lucapoldelmengo"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpldg%2Fscroll-interactions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpldg%2Fscroll-interactions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpldg%2Fscroll-interactions/lists"}