Pull to refresh strange behaviour

Question

I have the following code

<div id="fincasMaestro" class="page-layout  fullwidth page-layout-app p-16"  fxFlex fxLayout="column"  [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">

<!-- HEADER -->
<div id="loader" class="h2 text-center mt-4">Parcelas</div>

<mat-tab-group animationDuration="0ms">
    <mat-tab label="Activas"> <fincasactivas style="height: 100%"></fincasactivas> </mat-tab>
    <mat-tab label="Finalizadas"> <archivedfincas style="height: 100%"> </archivedfincas> </mat-tab>
</mat-tab-group>

and inside the component.ts I initialize the pull to refresh component

const ptr = PullToRefresh.init({
mainElement: '#loader',
instructionsPullToRefresh: 'Arrastre hacia abajo para refrescar',
instructionsReleaseToRefresh: 'Suelte para refrescar',
instructionsRefreshing: 'Refrescando la página',
onRefresh() {
   window.location.reload();
    }
 });

this works fine if I swipe up but I have one problem, the component inside my mat-tabs are lists with too much items to fit the screen, so I have an scroll, if I go to the bottom of the page and I try to scroll up the page refresh even if I'm at the bottom

any idea why is this happening? -

Just in case, I'm using Angular7+ with cordova.

Tested on Android

Edit: I've found the answer

Answer 1

I've found the answer

        mainElement: '#loader',
        shouldPullToRefresh: () => {return document.getElementById('fincas').scrollTop === 0},
        onRefresh: () => {
                //onRefresh code 
            }
      });

using shouldPullToRefresh and the property scrollTop we can only refresh if the scroll is at top, so we can move from bottom without refreshing by mistake