{"id":16429343,"url":"https://github.com/nicky-lenaers/ngx-scroll-tracker","last_synced_at":"2026-05-16T08:41:29.439Z","repository":{"id":86703275,"uuid":"94348713","full_name":"nicky-lenaers/ngx-scroll-tracker","owner":"nicky-lenaers","description":"An Angular X Scroll Tracker","archived":false,"fork":false,"pushed_at":"2018-09-18T09:31:50.000Z","size":19,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-07T22:24:38.219Z","etag":null,"topics":["angular","angular-aot","angular-universal","angular2","angular4","ngx","ngx-scroll-tracker"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/nicky-lenaers.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-14T15:56:45.000Z","updated_at":"2018-09-18T09:31:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"651d1a46-00a8-4bbd-b747-ec4414a13a4b","html_url":"https://github.com/nicky-lenaers/ngx-scroll-tracker","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicky-lenaers%2Fngx-scroll-tracker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicky-lenaers%2Fngx-scroll-tracker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicky-lenaers%2Fngx-scroll-tracker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicky-lenaers%2Fngx-scroll-tracker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicky-lenaers","download_url":"https://codeload.github.com/nicky-lenaers/ngx-scroll-tracker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240627959,"owners_count":19831600,"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":["angular","angular-aot","angular-universal","angular2","angular4","ngx","ngx-scroll-tracker"],"created_at":"2024-10-11T08:22:26.047Z","updated_at":"2026-05-16T08:41:24.411Z","avatar_url":"https://github.com/nicky-lenaers.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PROJECT NO LONGER MAINTAINED\n\n## Please use native `intersection-observer` to achieve similar results\n\n# ngx-scroll-tracker\n\nTrack any element to enhance scroll-based features in you app.\u003cbr\u003e\nWorks for **Angular 4+**, both **AoT** and **SSR**.\n\n## Installation\n```sh\n$ npm install @nicky-lenaers/ngx-scroll-tracker\n```\n\n## Usage\n#### 1. Import the Angular Module\n```ts\nimport { NgModule } from '@angular/core';\nimport { ScrollTrackerModule } from '@nicky-lenaers/ngx-scroll-tracker';\n\n@NgModule({\n  imports: [\n    ...\n    ScrollTrackerModule.forRoot()\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n#### 2. Apply Angular Directive\n```html\n...\n\u003cdiv (ngx-scroll-tracker)=\"handler($event)\"\u003e\n  \u003ch1\u003eLorem Ipsum\u003c/h1\u003e\n  \u003cp\u003eDolor sit amet\u003c/p\u003e\n\u003c/div\u003e\n```\n\n#### 3. Handle Scroll Tracker Events\n```ts\nimport { Component } from '@angular/core';\nimport { ScrollTrackerEventData } from '@nicky-lenaers/ngx-scroll-tracker';\n\n@Component({})\nexport class MyComponent {\n\n  public handler(eventData: ScrollTrackerEventData) {\n    // Use the eventData!\n  }\n}\n```\n\n## Data API\nThe `ScrollTrackerEventData` interface defines the data being emitted from the tracker. First-level properties:\n\n| Property     | Description                           |\n|--------------|---------------------------------------|\n| `$event`     | Native Browser Event                  |\n| `elementRef` | Angular ElementRef to tracked Element |\n| `data`       | The scroll data for the Element       |\n|              |                                       |\n\nThe `data` property holds the following properties:\n\n| Property                            | Description                                                                                                      |\n|-------------------------------------|------------------------------------------------------------------------------------------------------------------|\n| `elementTop.fromContainerTop`       | Distance between the top of the tracked element and the top of its scrollable container (pixels and ratio)       |\n| `elementTop.fromContainerBottom`    | Distance between the top of the tracked element and the bottom of its scrollable container (pixels and ratio)    |\n| `elementBottom.fromContainerTop`    | Distance between the bottom of the tracked element and the top of its scrollable container (pixels and ratio)    |\n| `elementBottom.fromContainerBottom` | Distance between the bottom of the tracked element and the bottom of its scrollable container (pixels and ratio) |\n\n#### Notes\n* Negative values for both `pixels` and `ratio` means the element has scrolled **past** its contianer treshold (`.fromContainerTop` etc.).\n* Positive values for both `pixels` and `ratio` means the element has **not** yet reached its container tresheld.\n\n#### Example\n```ts\nimport { Component } from '@angular/core';\nimport { ScrollTrackerEventData } from '@nicky-lenaers/ngx-scroll-tracker';\n\n@Component({})\nexport class MyComponent {\n\n  public handler(eventData: ScrollTrackerEventData) {\n\n    if (eventData.data.elementTop.fromContainerTop.ratio \u003c 0) {\n      console.log('Element Top is past Containter Top');\n    }\n    if (eventData.data.elementBottom.fromContainerBottom.ratio \u003c 0) {\n      console.log('Element Bottom is past Containter Bottom');\n    }\n    if (eventData.data.elementTop.fromContainerTop.pixels \u003c 200) {\n      console.log('Element Top is 200px from Containter Top');\n    }\n    if (eventData.data.elementTop.fromContainerTop.ratio \u003e 0.25) {\n      console.log('Element Top is past Containter Top');\n    }\n\n  }\n}\n```\n\n# License\n [MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicky-lenaers%2Fngx-scroll-tracker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicky-lenaers%2Fngx-scroll-tracker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicky-lenaers%2Fngx-scroll-tracker/lists"}