Detect scroll event on element.nativeElement angular

Question

I am using angular 8.2 and want to detect scroll event on elementRef.nativeElement. I have tried various ways:

1. renderer2
2. addEventListener
3. rxJs

however, No luck.

Yes, definitely I can track event using document and window. but I want to detect on specific element.

I am using directive for the same.

I have seen that this requirement is working with rxJS 5.x and angular 4.x | 5.x. but not with angular 8.x to latest.

working example with angular 4.x and rxJs 5.x https://ashwin-sureshkumar.github.io/angular-infinite-scroller/

non working stackBlitz with latest angular

question from:https://stackoverflow.com/questions/65949987/detect-scroll-event-on-element-nativeelement-angular

Answer 1

The actual scroll code is fine. The reason it's not working in the Angular 8 version is that you're scrolling on the page, not on the div. The difference between the two is that the working example has a fixed height with overflow: scroll whereas the non-working example has the div taking up its entire height.

To get it to work, you can simply add the following css to the .scrolling-guy div:

height: 500px;
overflow-y: scroll;

Working example