ngx-scroll-event

Lightweight Angular directive that emits scroll events and detects when the user is reaching the top or bottom of an element or the window.

Angular 21 · Node.js ^20.19, ^22.12, or ≥24

---

Features

• Element or window scroll — Use the same directive on a scrollable element or rely on window scroll.
• Top/bottom detection — Know when the user is near the top or bottom via configurable pixel offsets.
• Standalone & NgModule — Works with standalone components (default) or the classic module setup.
• Typed events — NgxScrollEvent includes isReachingTop, isReachingBottom, originalEvent, and isWindowEvent.

---

Install

npm install ngx-scroll-event

yarn add ngx-scroll-event

pnpm add ngx-scroll-event

---

Quick start

Standalone (recommended)

Import the directive and add libScrollEvent plus the (onscroll) handler to any element (or the host for window scroll):

import { NgxScrollEventDirective, NgxScrollEvent } from 'ngx-scroll-event';

@Component({
  standalone: true,
  imports: [NgxScrollEventDirective],
  template: `
    <div libScrollEvent (onscroll)="onScroll($event)">
      <!-- scrollable content -->
    </div>
  `,
})
export class MyComponent {
  onScroll(event: NgxScrollEvent) {
    if (event.isReachingBottom) console.log('Near bottom');
    if (event.isReachingTop) console.log('Near top');
    if (event.isWindowEvent) console.log('Window scroll');
  }
}

NgModule

import { NgxScrollEventModule } from 'ngx-scroll-event';

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

Then in any template:

<div libScrollEvent (onscroll)="onScroll($event)">...</div>

---

API

Directive: libScrollEvent

Input	Type	Default	Description
topOffset	number	100	Pixels from top to consider "reaching top".
bottomOffset	number	100	Pixels from bottom to consider "reaching bottom".

Output	Type	Description
onscroll	NgxScrollEvent	Fired on scroll (element or window).

Event: NgxScrollEvent

interface NgxScrollEvent {
  isReachingBottom: boolean;  // true when scroll is within bottomOffset of bottom
  isReachingTop: boolean;     // true when scroll is within topOffset of top
  originalEvent: Event;       // native scroll event
  isWindowEvent: boolean;     // true when the scroll target is the window
}

---

Examples

Custom offsets

<div
  libScrollEvent
  (onscroll)="onScroll($event)"
  [topOffset]="50"
  [bottomOffset]="200">
  ...
</div>

Infinite scroll

onScroll(event: NgxScrollEvent) {
  if (event.isReachingBottom && !this.loading) {
    this.loading = true;
    this.loadMore().finally(() => (this.loading = false));
  }
}

Window scroll (e.g. “back to top” button)

The directive listens to both the element and the window. Add it to any element (e.g. a root wrapper); in the handler, use event.isWindowEvent when you only care about window scroll:

template: `<div libScrollEvent (onscroll)="onScroll($event)">...</div>`

onScroll(event: NgxScrollEvent) {
  if (event.isWindowEvent) {
    this.showBackToTop = !event.isReachingTop;
  }
}

---

Development

• Build: npm run build:lib
• Unit tests: ng test ngx-scroll-event
• E2E: npx playwright install once, then npm run e2e

See PUBLISHING.md for release steps.

---

License

MIT · GitHub