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