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:

| 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

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