I'm encountering some bugs in my Angular 1.5 project with TypeScript. I'm trying to retrieve the scrollTop value from the .uc-card element.
public container = document.querySelector(".uc-card");
In my $onInit, I have:
public $onInit() {
this.scroll(this.container);
this.doSomething();
this.container.addEventListener('scroll', function() {
console.log('scrollOnInit');
this.scroll(this.container);
this.doSomething();
});
}
I've defined two functions, scroll and doSomething:
private doSomething() {
console.log('doSomething');
}
private scroll(e) {
console.log('scroll')
console.log(e.scrollTop);
console.log(this.container.scrollTop);
}
When running the application, the following appears in the console log:
scroll
0
0
doSomething
Everything seems to be working correctly here. It displays the scrollTop value of the .uc-card element. However, upon scrolling, I encounter the following error:
scrollOnInit
CustomerActivitiesComponent.ts:38 Uncaught TypeError: this.doSomething is not a function HTMLDivElement (CustomerActivitiesComponent.ts:38)
The scroll function appears to be functioning as it outputs 'scrollOnInit'. However, the scroll function is either not being called or showing any output, and the doSomething method is throwing an error. Strangely, they all work perfectly fine in the onInit stage.