Scroll Event

To use NgScrollbar scroll event, you will need to get the component reference from the template. this can be done using the @ViewChild decorator

Example: Subscribe to the scroll event

@ViewChild(NgScrollbar) scrollbarRef: NgScrollbar;

ngAfterViewInit() {
  this.scrollbarRef.scrollable.scrolled.subscribe(e => console.log(e));
}

Note: in order to avoid hitting change detection for every scroll event, all of the events emitted from this stream will be run outside the Angular zone. If you need to update any data bindings as a result of a scroll event, you have to run the callback using NgZone.run.

Example:

Change the header font size on scroll event

@Component({
  selector: 'app-page-title',
  template: `
    <ng-scrollbar>
      <div class="page-title" [style.fontSize]="fontSize$ | async">
        <h1>Hello World</h1>
      </div>  
      <div>{{ longContent }}</div>
    </ng-scrollbar>
  `
})
export class PageTitleComponent {

  // Stream that sets the title font size on scroll event
  fontSize$ = new Subject();

  // Unsubscriber for elementScrolled stream.
  scrollSubscription = Subscription.EMPTY;

  // Get scrollbar component reference
  @ViewChild(NgScrollbar) scrollbarRef: NgScrollbar;
  
  constructor(private zone: NgZone) {
  }
  
  ngAfterViewInit() {
    // Subscribe to scroll event
    this.scrollSubscription = this.scrollbarRef.scrolled.pipe(
      map((e: any) => e.target.scrollTop > 50 ? '0.75em' : '1em'),
      tap((size: string) => this.zone.run(() => this.fontSize$.next(size)))
    ).subscribe();
  }
  
  ngOnDestroy() {
    this.scrollSubscription.unsubscribe();
  }
}