Can't get infinite scroll working without scrollbars

Ionic Framework
1

Has anyone worked out how to get infinite scroll working while also hiding scrollbars?

This is the scss I use to hide scrollbars:

    ion-content {
        --padding-bottom: 200px!important;
         --offset-bottom: auto!important;
        --overflow: hidden;
         overflow: auto;
        &::-webkit-scrollbar {
          display: none;
        }
      }

This is the html part:

...
    <ion-infinite-scroll threshold="10px" (ionInfinite)="loadData($event)">
        <ion-infinite-scroll-content
          loadingSpinner="lines"
          loadingText="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

and this is the .ts:

import { Component, ViewChild,OnInit } from '@angular/core';
import { IonInfiniteScroll , IonContent,ModalController} from '@ionic/angular';
...
export class GlobalRankingsPage implements OnInit {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  @ViewChild(IonContent) content: IonContent;
...
loadData(event) {
    if(this.nextPage!=null){
      setTimeout(() => {

      this.globalRank(); //this just adds records to the dataList
      event.target.complete();
      if (this.dataList.length >= 150) {
        event.target.disabled = true;
      }
    
      }, 300);
    }else{
      event.target.disabled = true;
      event.target.complete();
    }
  }
 
  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }
...

If I remove the css (so scrollbars show) the infinite scroll works fine. But if I hide the scrollbars the loadData function doesn’t get triggered.

Thanks!