Ionic 2 ion-refresher with scroll content

I have scroll content with big data list and refresher on the top
but when i scroll up the refresher run.
I want to run refresher only on top of the page.
Also the deltaY / currentY / startY all are “null”

Same problem here !!

I solves this with scroll listener of my content.
And flag on refresher if enable or not.
when you scroll check to scrollTop if its 0 so change the flag to true else false.

1.import Renderer from '@angular/core’
2. inject Renderer to constructor => public renderer:Renderer
3. look at this example.

HTML:

   <div class="page-bottom" #myContent>

      <ion-refresher (ionRefresh)="refreshJobs($event)" [enabled]="enableRefresh">
          <ion-refresher-content refreshingSpinner="circles"></ion-refresher-content>
      </ion-refresher>

     <job *ngFor="let item of (jobs | orderBy: sortByConfig)" [id]="item.JOBNO" [type]="jobsType"></job>

   </div>

ts:

@ViewChild('myContent') myContent;

ngAfterViewInit() {
this.renderer.listen(this.myContent.nativeElement, 'scroll', (event) => {
  let scrollTop = event.target.scrollTop;

  if (scrollTop > 0) {
    this.enableRefresh = false;
  } else {
    this.enableRefresh = true;
  }

  });
}
1 Like

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;
}

Thanks, in my case I had to make a little modification , because I’m using slider and can’t use the viewchild… I get the scroll element by the native javascript.

let scrollElemnt = document.getElementsByClassName(“swiper-slide swiper-slide-active”)[0];
this.renderer.listen(scrollElemnt, ‘scroll’, (event) => {
let scrollTop = event.target.scrollTop;

    if (scrollTop > 0) {
      this.enableRefresh = false;
    } else {
      this.enableRefresh = true;
    }
1 Like