Ion-infinite-scroll in custom component v5

I have a list that takes up 50vh. I want to use infinite scroll on that list.
This doesn’t work. From reading the docs, it looks like <ion-infinite-scroll> is based off the scroll position in the page. I was hoping it was based off of whether or not the scroll element was rendered in viewport

I’ve created this demo:

All of the demo code is for tab1.

If you comment out tab1.scss height:

.top-half {
 // height: 50vh;
  overflow: scroll;

Then the expected functionality returns.

Is it possible to pass in the element I want to base the scroll position on?
Something like:

 <ion-list #scrollList></ion-list>

  <ion-infinite-scroll scroll="scrollList" threshold="100px" (ionInfinite)="loadData($event)" >