Refresher ion-scroll tag

Ionic Framework ionic-v3
1

I have an ion-scroll tags on the same page. I would like to add a refresher.

So look something like this:

ion-content

ion-refresher
ion-refresher-content /ion-refresher-content
ion refresher

ion-scroll
/ion-scroll

ion-content

I have tried to add the refresher, but can’t quite get it to work. The problem I am facing is if I scroll down in my scroll views the refresh starts to refresh. I only want to start the refresh if the scroll view is on the top and then I can pull down. I don’t want to be able to pulldown if my scroll view is say halfway down and then I scroll up and it starts to refresh. Is this situation I would like it to continue to scroll up to the top and once it hits the top then I can pull to refresh. How would I accomplish this?

I Hope this makes sense. In the end I would like it to work as a traditional pull to refresh works. So if you can’t see the first item in the list (the most top item) it should not refresh if you start scrolling up.

2

Any solutions?I have the same problem

3

I guess you could try putting the refresher inside the ion-scroll element?

4

I tried, but it still passes the ion-content to the refresher function to calculate the scrollTop instead of the ion-scroll. Is it a bug?

<ion-content class="match-details">
	<div class="match-details-container">
		<shedule-item [shedule-item]="item"></shedule-item>
		<ion-scroll scrollY="true" class="segment-content">
			<ion-refresher (refresh)="doRefresh($event, refresher)">
			</ion-refresher>
			<div>
				CONTENT
			</div>
		</ion-scroll>
	</div>
</ion-content>

And it still happends with warning form refresher.js:

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

5

I have this same issue. Were you able to resolve this one??