@simcoder/ngx-scroll-tracker v0.1.3

ngx-scroll-tracker

Track any element to enhance scroll-based features in you app. Works for Angular 6+, both AoT and SSR.

Installation

$ npm install @simcoder/ngx-scroll-tracker

Usage

1. Import the Angular Module

import { NgModule } from '@angular/core';
import { ScrollTrackerModule } from '@simcoder/ngx-scroll-tracker';

@NgModule({
  imports: [
    ...
    ScrollTrackerModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Apply Angular Directive

...
<div (scrollTracker)="handler($event)">
  <h1>Lorem Ipsum</h1>
  <p>Dolor sit amet</p>
</div>

3. Handle Scroll Tracker Events

import { Component } from '@angular/core';
import { ScrollTrackerEventData } from '@simcoder/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:

The data property holds the following properties:

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

import { Component } from '@angular/core';
import { ScrollTrackerEventData } from '@simcoder/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