fix(ion-infinite-scroll): change scroll handler to use scrollEl instead of host

[positlabs]

Pull request checklist

Please check if your PR fulfills the following requirements:

• [-] Tests for the changes have been added (for bug fixes / features)
• [-] Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

I didn't change or add any tests since this should simply be restoring functionality. I'm confused about how it was working before because it was listening for a scroll event on the element's host and not the actual scrolling element.

If the ion-infinite-scroll is meant to be the scrolling element, then we could ditch this PR and make the appropriate updates to usage docs.

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: #18632

What is the new behavior?

• Check disabled flag in scroll handler, do nothing and return zero if it's disabled
• Listen to scroll events on scrollEl instead of host

Does this introduce a breaking change?

• Yes
• No

Other information

My goal is to use this in an existing stencil app, so I wrote a test case for that. I didn't include it in the commit, but here it is in case it helps someone.

import { Component, h, Element, State } from '@stencil/core';

@Component({
  tag: 'app-root',
  styleUrl: 'app-root.scss',
})
export class AppRoot {
  @Element() el: HTMLElement
  @State() items: Array<any>
  constructor() {
    this.items = Array(100).fill(0);
  }
  onIonInfinite(event) {
    console.log('onIonInfinite', event);
    setTimeout(() => {
      console.log('Done');
      (event.target as any).complete();
      this.items = this.items.concat(Array(10).fill(0));

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (this.items.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }
  render() {
    return (
      <ion-content>
        <ion-list>{this.items.map(() => <div>item</div>)}</ion-list>
        <ion-infinite-scroll threshold="40px" onIonInfinite={this.onIonInfinite.bind(this)}>
          <ion-infinite-scroll-content
            loading-spinner="bubbles"
            loading-text="Loading more data...">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-content>
    );
  }
}

[positlabs]

This will reportedly be fixed by #18732