https://github.com/nicky-lenaers/ngx-scroll-tracker
An Angular X Scroll Tracker
https://github.com/nicky-lenaers/ngx-scroll-tracker
angular angular-aot angular-universal angular2 angular4 ngx ngx-scroll-tracker
Last synced: 3 months ago
JSON representation
An Angular X Scroll Tracker
- Host: GitHub
- URL: https://github.com/nicky-lenaers/ngx-scroll-tracker
- Owner: nicky-lenaers
- Created: 2017-06-14T15:56:45.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-18T09:31:50.000Z (over 6 years ago)
- Last Synced: 2025-01-07T22:24:38.219Z (5 months ago)
- Topics: angular, angular-aot, angular-universal, angular2, angular4, ngx, ngx-scroll-tracker
- Language: TypeScript
- Size: 18.6 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PROJECT NO LONGER MAINTAINED
## Please use native `intersection-observer` to achieve similar results
# ngx-scroll-tracker
Track any element to enhance scroll-based features in you app.
Works for **Angular 4+**, both **AoT** and **SSR**.
## Installation
```sh
$ npm install @nicky-lenaers/ngx-scroll-tracker
```
## Usage
#### 1. Import the Angular Module
```ts
import { NgModule } from '@angular/core';
import { ScrollTrackerModule } from '@nicky-lenaers/ngx-scroll-tracker';
@NgModule({
imports: [
...
ScrollTrackerModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
#### 2. Apply Angular Directive
```html
...
Lorem Ipsum
Dolor sit amet
```
#### 3. Handle Scroll Tracker Events
```ts
import { Component } from '@angular/core';
import { ScrollTrackerEventData } from '@nicky-lenaers/ngx-scroll-tracker';
@Component({})
export class MyComponent {
public handler(eventData: ScrollTrackerEventData) {
// Use the eventData!
}
}
```
## Data API
The `ScrollTrackerEventData` interface defines the data being emitted from the tracker. First-level properties:
| Property | Description |
|--------------|---------------------------------------|
| `$event` | Native Browser Event |
| `elementRef` | Angular ElementRef to tracked Element |
| `data` | The scroll data for the Element |
| | |
The `data` property holds the following properties:
| Property | Description |
|-------------------------------------|------------------------------------------------------------------------------------------------------------------|
| `elementTop.fromContainerTop` | Distance between the top of the tracked element and the top of its scrollable container (pixels and ratio) |
| `elementTop.fromContainerBottom` | Distance between the top of the tracked element and the bottom of its scrollable container (pixels and ratio) |
| `elementBottom.fromContainerTop` | Distance between the bottom of the tracked element and the top of its scrollable container (pixels and ratio) |
| `elementBottom.fromContainerBottom` | Distance between the bottom of the tracked element and the bottom of its scrollable container (pixels and ratio) |
#### Notes
* Negative values for both `pixels` and `ratio` means the element has scrolled **past** its contianer treshold (`.fromContainerTop` etc.).
* Positive values for both `pixels` and `ratio` means the element has **not** yet reached its container tresheld.
#### Example
```ts
import { Component } from '@angular/core';
import { ScrollTrackerEventData } from '@nicky-lenaers/ngx-scroll-tracker';
@Component({})
export class MyComponent {
public handler(eventData: ScrollTrackerEventData) {
if (eventData.data.elementTop.fromContainerTop.ratio < 0) {
console.log('Element Top is past Containter Top');
}
if (eventData.data.elementBottom.fromContainerBottom.ratio < 0) {
console.log('Element Bottom is past Containter Bottom');
}
if (eventData.data.elementTop.fromContainerTop.pixels < 200) {
console.log('Element Top is 200px from Containter Top');
}
if (eventData.data.elementTop.fromContainerTop.ratio > 0.25) {
console.log('Element Top is past Containter Top');
}
}
}
```
# License
[MIT](/LICENSE)