Can't get infinite scroll working without scrollbars

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)">
          loadingText="Loading more data...">

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) {
      setTimeout(() => {

      this.globalRank(); //this just adds records to the dataList;
      if (this.dataList.length >= 150) { = true;
      }, 300);
    }else{ = true;;
  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.