Unable to get scroll event for list view

Ionic Framework ionic-v3
1

I want to perform some action when an element is scrolled out of view. However, try as I might, I haven’t been able to any scroll event to fire, and I can never tell when the content is being scrolled. This is inside of a tabbed view. The layout of the page is:

<ion-content>
  <div [ngSwitch]=showSection>
    <ion-list *ngSwitchCase="'sectionOne'">
      section 1 contents here
      <special-component></special-component>
    </ion-list>
    <ion-list *ngSwitchCase="'tabTwo'">
      section 2 contents here
    </ion-list>
  </div>
</ion-content>

When <special-component> is scrolled out of view, I want to collapse it. However, nothing I have tried has been able to check a scrolling event at all, much less a specific scrolling event on the content containing <special component>.

I have tried using @HostListener('window:scroll', ['$event']) with a function (also with document:scroll and just scroll).

I have tried using @ViewChild(Content) and inside of ngAfterViewInit I use this.content.ionScroll.subscribe.

I have tried adding (onScroll) and (ionScroll) to pretty much every element in the DOM I can think of that would manage scrolling.

I have never been able to get my scroll event handler to fire.

Is there something else I need to do to check scroll events for ionic content?

2

Found this issue here: https://github.com/ionic-team/ionic/issues/10938

Seems like you need to call enableScrollListener on the content before you can listen to the event.

3

Try with something like this:

import { Renderer2 } from '@angular/core';
...
constructor(private renderer: Renderer2) {}

ngOnInit() {
    this.renderer.listen(this.specialComponent, 'scroll', (event) => {
        // Do something with 'event'
        console.log(this.specialComponent.scrollTop);
    });
}