I have a large dataset that needs to be displayed on a page, and I'm attempting to implement an infinite scroll feature to load more data as the user scrolls down. However, I'm encountering issues with debugging my directive. Can someone assist me in triggering the scroll event when reaching the bottom? Is there another method to capture the scroll event on a div element so that I can enhance the performance of my webpage?
explore.component.html
<div style="overflow: auto !important;height: 488px !important;" scrollTracker (scrollingFinished)="onScrollingFinished()">
<p-tree [value]="files | filter:searchText" selectionMode="single" [(selection)]="selectedFiles"
(onNodeSelect)="nodeSelect($event)" (onNodeExpand)="expandNode($event)" ></p-tree>
</div>
explore.component.ts:
@Output() scrollingFinished = new EventEmitter<void>();
onScrollingFinished() {
this.scrollingFinished.emit();
}
directive:
import { Directive, Output, EventEmitter, HostListener } from '@angular/core';
@Directive({
selector: '[scrollTracker]'
})
export class ScrollTrackerDirective {
@Output() scrollingFinished = new EventEmitter<void>();
emitted = false;
@HostListener("window:scroll", [])
onScroll(): void {
debugger;
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight && !this.emitted) {
this.emitted = true;
this.scrollingFinished.emit();
} else if ((window.innerHeight + window.scrollY) < document.body.offsetHeight) {
this.emitted = false;
}
}
}