Track Scroll for Angular2
Features
- easy-to-use directive: tracks when element enters a certain point of the window just by adding
trackScroll
directive - customizable: adjust tracker position, and pixel offset
Quick Start
npm install ng2-track-scroll --save
Table of contents
Setup
First you need to install the npm module:
npm install ng2-track-scroll --save
Then add the Ng2TrackScrollModule
to the imports array of your application module (or a shared module):
;;; // <-- import the module;
Usage
In your template you should add the trackScroll
attribute to elements you want to enable tracking.
As soon as the tracking point gets past an trackScrollEnter
event will be triggered, and as soon as the height of the element gets past an trackScrollLeave
event will be triggered.
@ { console; } { console; }
Configuration
In your template you could pass some configurations, adding [trackScrollConfig]="{ ... }"
with any of the options to overwrite.
Option | Type | Default | Description |
---|---|---|---|
position |
string | 'middle' | Position of the tracking point. Options: 'top', 'middle', 'bottom' |
offset |
number | 0 (px) | Amount of pixels to add to the tracking point |
offsetPosition |
string | 'bottom' | If you select position 'middle' and specify an offset amount, you could indicate if you want to add them on above or below the tracking point. Options: 'top, 'bottom' |
@ { console; } { console; }
Demo
The demo subfolder contains a project created with angular-cli that has been adapted to showcase the functionality of ng2-track-scroll. To execute the code follow this steps:
// Go the the demo folder
cd demo
// Install dependencies
npm install
// Run the server
ng serve
Then go to http://localhost:4200 to check the demo running.
TODO:
- Test across browsers
- Implement a debug option
- Add tests to the library and demo
- Add new configurations