xxxxxxxxxx
<div #listing (scroll)="onWindowScroll()">
apply id on those div whic scroll show
<div>
@ViewChild('listing') lsitingScroll: ElementRef;
@HostListener("window:scroll", ["$event"])
onWindowScroll() {
const {scrollHeight, clientHeight, scrollTop} = this.lsitingScroll.nativeElement
if(scrollTop + Math.round(clientHeight + 0.5) >= scrollHeight){
this.scrollingEvent.emit();
console.log("api call here");
}
}
xxxxxxxxxx
<!----- HTML ----->
<div class="image-list" (scroll)="onScroll()">
<div>
<!----- JS/TS ---->
lastScrollPosition = 0;
@HostListener('window:scroll', ['$event'])
onScroll() {
const raw: any = document.querySelector('.image-list');
const currentScrollPosition = raw.scrollTop;
if (currentScrollPosition > this.lastScrollPosition) {
// Scrolling down
if (currentScrollPosition + raw.clientHeight >= raw.scrollHeight - 5) {
this.getData();
}
}
this.lastScrollPosition = currentScrollPosition;
}