I need help troubleshooting an issue with a function that is supposed to perform certain operations when the scrollbar is moved. I attached an event listener to the document using an ID, but it's resulting in an error.
ERROR Message: TypeError: Cannot read property 'nativeElement' of undefined
ngOnInit() {
document.getElementById('sidenav').addEventListener('scroll', () => this.onScroll('$event'), true);
}
ngOnChanges(changes: SimpleChanges) {
this.data = changes.data.currentValue;
this.data_display = changes.data.currentValue.slice(0, 6);
}
ngOnDestroy() {
console.log('destroy')
document.getElementById('sidenav').removeEventListener('scroll', () => this.onScroll('$event'), false);
}
onScroll(event): void {
const top = event.elementRef.nativeElement.scrollTop;
const total = event.elementRef.nativeElement.scrollHeight;
const height = event.elementRef.nativeElement.clientHeight;
if ((height + top) === total) {
if (this.data_display.length <= this.data.length) {
this.data_display.push(...this.data.slice(this.start, this.end));
this.start += 6;
this.end += 6;
}
console.log('yes')
this.cdr.detectChanges();
}
}