Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngx-scroll-event

Package Overview
Dependencies
Maintainers
4
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-scroll-event

# ngx-scroll-event An Angular 2+ directive to emit an event if scroll occurs on an element or window.

  • 2.0.2
  • latest
  • npm
  • Socket score

Version published
Maintainers
4
Created
Source

Now supports Angular 10+

ngx-scroll-event

An Angular 2+ directive to emit an event if scroll occurs on an element or window.

Features

  • 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.

Install

  • With NPM
npm install ngx-scroll-event --save
  • With Yarn
yarn add ngx-scroll-event

Usage

Import ScrollEvent and add it to the imports array of your module.

// app.module.ts
import { NgxScrollEventModule } from 'ngx-scroll-event';

@NgModule({
  imports: [
    ...,
    NgxScrollEventModule,
    ...,
  ]
})
export class AppModule { }

In your template you may now add the libScrollEvent attribute and (onscroll) event to any element. you can also add [bottomOffset] or [topOffset] to change when reaching bottom or top detection, bot values defaults to 100px, the value should be a number in pixels.

// app.awesome.component.ts

...
import { NgxScrollEvent } from 'ngx-scroll-event';
...

@Component({
   ...
   template: `...
        <div libScrollEvent (onscroll)="handleScroll($event)" [bottomOffset]="200" [topOffset]="200" >
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
        <div>
   ...`,
})
export class AwesomeComponent {
  public handleScroll(event: NgxScrollEvent) {
    console.log('scroll occurred', event.originalEvent);
    if (event.isReachingBottom) {
      console.log(`the user is reaching the bottom`);
    }
    if (event.isReachingTop) {
      console.log(`the user is reaching the top`);
    }
    if (event.isWindowEvent) {
      console.log(`This event is fired on Window not on an element.`);
    }

  }
}

Code scaffolding

Run 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-event or else it will be added to the default project in your angular.json file.

Build

Run ng build ngx-scroll-event to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-scroll-event, go to the dist folder cd dist/ngx-scroll-event and run npm publish.

Running unit tests

Run ng test ngx-scroll-event to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

FAQs

Package last updated on 13 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc