How to detect if ion-content has a scrollbar?

I want to hide or show elements when there is or there isn’t a scrollbar on ion-content. More specifically, I want to show a button (to load more items in a list) when there’s no scrollbar and hide it where there is a scrollbar (so the loading of more items is done by ion-infinite-scroll).

My Ionic app will also be deployed to the desktop so users with large screens won’t initially see a scrollbar and thus ion-infinite-scroll won’t be triggered.

Here’s a demo that showcases the issue:

      Ionic header

  <div class="ion-padding">
    <p *ngFor="let item of itemList">{{ item }}</p>

    <!-- How to hide this button when ion-content has a scrollbar? -->
    <!-- *ngIf="???" -->
    <ion-button (click)="incrementItemList(5)">Load more items</ion-button>

  <ion-infinite-scroll (ionInfinite)="loadMoreItems($event)">
    <ion-infinite-scroll-content loadingSpinner="crescent"></ion-infinite-scroll-content>

      Ionic footer

import { Component } from '@angular/core';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage {

  itemList: string[] = [];

  constructor() {}

  ionViewWillEnter() {

  incrementItemList(times: number) {
    for (let i = 1; i <= times; i++) {
      this.itemList.push(`Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia placeat nam sapiente iusto eligendi`);

  loadMoreItems(event: any) {
    setTimeout(() => {
    }, 1000);


I’m using Ionic 4.5.0 + Angular.

I have tried using getScrollElement, scrollHeight, clientHeight, offsetHeight, but with no success.

Any ideas?

Solved by detecting the scrollbar: