Now supports Angular 10+
An Angular 2+ directive to emit an event if scroll occurs on an element or window.
- Detect scroll on an element or window and emits an event, also calculates if the user is reaching the top/bottom of that element or not.
- With NPM
npm install ngx-scroll-event --save
- With Yarn
yarn add ngx-scroll-event
Import ScrollEvent and add it to the imports array of your module.
In your template you may now add the
libScrollEvent attribute and
(onscroll) event to any element.
you can also add
[topOffset] to change when reaching bottom or top detection, bot values defaults to 100px, the value should be a number in pixels.
ng generate component component-name --project ngx-scroll-event to generate a new component. You can also use
ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-scroll-event.
Note: Don't forget to add
--project ngx-scroll-eventor else it will be added to the default project in your
ng build ngx-scroll-event to build the project. The build artifacts will be stored in the
After building your library with
ng build ngx-scroll-event, go to the dist folder
cd dist/ngx-scroll-event and run
Running unit tests
ng test ngx-scroll-event to execute the unit tests via Karma.
To get more help on the Angular CLI use
ng help or go check out the Angular CLI README.