Angular NgxDetectScroll

This library was generated with Angular CLI version 14.2.0 and checked with angular 14,15 and 16.

Installation

Run npm i ngx-detect-scroll --save

Usage

Import DetectScrollModule in your module

// app.module.ts
import { NgxDetectScrollModule } from 'ngx-detect-scroll';

imports: [
    BrowserModule,
    NgxDetectScrollModule
]

Import ScrollEvent in your component

import { Component } from '@angular/core';
import { ScrollEvent } from 'ngx-detect-scroll';

@Component({
    selector: 'scroll-detector-root',
    template: `<div libNgxDetectScroll (onScroll)="handleScroll($event)" [bottomOffset]="100" [topOffset]="100" >
    <figure>
      <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
      <figcaption><a href="#">1</a></figcaption>
    </figure>
    <figure class="landscape">
      <img src="https://assets.codepen.io/12005/suspension-bridge.jpg" alt="The Clifton Suspension Bridge" />
      <figcaption><a href="#">2</a></figcaption>
    </figure>
    <figure>
      <img src="https://assets.codepen.io/12005/sunset.jpg" alt="Sunset and boats" />
      <figcaption><a href="#">3</a></figcaption>
    </figure>
    <figure>
      <img src="https://assets.codepen.io/12005/snowy.jpg" alt="a river in the snow" />
      <figcaption><a href="#">4</a></figcaption>
    </figure>
    <figure class="landscape">
      <img src="https://assets.codepen.io/12005/bristol-balloons1.jpg" alt="a single checked balloon" />
      <figcaption><a href="#">5</a></figcaption>
    </figure>
    <figure>
      <img src="https://assets.codepen.io/12005/dog-balloon.jpg" alt="a hot air balloon shaped like a dog" />
      <figcaption><a href="#">6</a></figcaption>
    </figure>
    <figure>
      <img src="https://assets.codepen.io/12005/abq-balloons.jpg" alt="View from a hot air balloon of other balloons" />
      <figcaption><a href="#">7</a></figcaption>
    </figure>
    <figure>
      <img src="https://assets.codepen.io/12005/disney-balloon.jpg" alt="a balloon fairground ride" />
      <figcaption><a href="#">8</a></figcaption>
    </figure>
    <figure class="landscape">
      <img src="https://assets.codepen.io/12005/bristol-harbor.jpg" alt="sunrise over a harbor" />
      <figcaption><a href="#">9</a></figcaption>
    </figure>
    <figure>
      <img src="https://assets.codepen.io/12005/bristol-balloons2.jpg" alt="three hot air balloons in a blue sky" />
      <figcaption><a href="#">10</a></figcaption>
    </figure>
    <figure>
      <img src="https://assets.codepen.io/12005/toronto.jpg" alt="the Toronto light up sign at night" />
      <figcaption><a href="#">11</a></figcaption>
    </figure>
  </div>`,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'ScrollDetect';
    public handleScroll(event: ScrollEvent) {
        console.log(event, "==event from scrollevent")
    }
}