ion-refresher always fired when pulling up at any position in the page (middle,bottom) not only on top of the page.

[jayzyaj]

Bug Report

I need to make 3 slides using ion-slides component after adding ion-refresher component to my page the ion-refresher always fired when pulling up at any position in the page (middle,bottom) not only on top of the page.

Ionic Info

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.11
    Cordova Platforms  : android 6.3.0 browser 5.0.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.12.2
    npm               : 4.6.1 
    OS                : Linux 4.13

Environment Variables:

    ANDROID_HOME : /home/clifford/Android/Sdk

Misc:

    backend : pro

Describe the Bug
ion-refresher pull icon always shows up even at the bottom center page which will only be showed when on the most top part of the page. I am using ion-slides and any slide has an issue when scrolling up. It already shows the refresher even when I am not on the top of the page

Steps to Reproduce
Steps to reproduce the behavior:

1. When I scroll down to see some data base on api request
2. When I finally want to scroll up the pulling icon already shows even in the bottom part or center part of the slide or page which would suppose to be showed at the most top part of the slide or page.
3. ion-refresher gets automatically pulled when scrolling back to top.

Related Code
stackoverflow
stackoverflow2

`

<ion-refresher (ionRefresh)="doRefresh($event)">
  <ion-refresher-content
    pullingIcon="arrow-dropdown"
    refreshingSpinner="crescent">
  </ion-refresher-content>
</ion-refresher>

  <ion-toolbar *ngIf="selectedSegment=='first'" id="fade" class="toolbar-segment">
    <ion-segment class="horizontal-scroll" mode="md" color="community" [(ngModel)]="selectedSegmentCategory" (ionChange)="filterPostsBy($event)">
      <ion-segment-button *ngFor="let category of categories; let i = index" [value]="category.name">
        {{category.name | translate}}
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)" *ngIf="!spinner">

<!--Explore-->
<ion-slide *ngIf="!preloader">
  <ion-scroll scrollY="true">
    <!-- Content 1 here -->
  </ion-scroll>
</ion-slide>

<ion-slide *ngIf="!preloader">
  <ion-scroll scrollY="true">
   <!-- Content 2 here -->
  </ion-scroll>
</ion-slide>

`

Expected Behavior
Pulling icon of the refresher is supposed to show at the most top part of the slide or page. But always shows when scrolling up at the bottom part of the slide or content even at the middle

Additional Context
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[chhavi2]

You will have to control the ion-refresher being enabled based on if the ion-slide scrollTop is less than 10. This way you will be restricting its enabled state and it won't be triggered with scroll up inside the ion-slide or ion-scroll and scroll position will be retained in each slide.
Code Sample below -

<ion-refresher [enabled]="isRefresherEnabled()"(ionRefresh)="doRefresh($event);">

</ion-refresher-content>

 </ion-refresher>


<ion-slides>

    <ion-slide *ngFor="let slide of slides;let i = index;">
     <ion-scroll class="y-scroll-custom" scrollY="true" #myScroll>
     <!--put long text--> 
     </ion-scroll>
    </ion-slide>
  </ion-slides>

</ion-content>

in your corresponding *.ts file -

import { ViewChildren, QueryList } from '@angular/core';
import { Slides} from 'ionic-angular';




@ViewChild('mySlider') slider: Slides;
@ViewChildren('myScroll') components:QueryList<Scroll>;

isRefresherEnabled() {
	if (this.slider) {
		const activeSlideIdx = this.slider.getActiveIndex();
		if (this.components && this.components['_results']) {
			if (this.components['_results'][activeSlideIdx]) {
				if (this.components['_results'][activeSlideIdx]['_scrollContent']) {
					if (this.components['_results'][activeSlideIdx]['_scrollContent'].nativeElement.scrollTop <= 10) {
						return true;
					}
				}
			}
		}
	}
	return false;
}

[ionitron-bot]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#386