Refresher in scrollable slides

I have a ion-content view that contains an ion-refresher and ion-slides. These slides have their own scrolling content (css overflow: scroll) with each a ion-infinite-scroll.
Now when i scroll down the page and a little back up, the ion-refresher triggers before the slides’ scroll content reaches the top.

Another issue I notice is that all ion-infinite-scroll events are triggered when one reaches the end of scrollable content.

Does anyone have an idea how to resolve this?


I have the exact same issue. Did you already figure out how to fix this?

Unfortunately nothing so far. I created my own solution for the time being but this is far from perfect.

Here is the workaround could be used untill the issue is fixed.

import { Directive, ElementRef } from '@angular/core';

 * Wee need this directive to prevent page refresh on grid view scrolling
    selector: '[scrollCatcher]'
export class ScrollCatcherDirective {

    private scrollElement: HTMLElement;

    constructor(private el: ElementRef) {

    ngOnInit() {
        this.scrollElement = this.el.nativeElement.getElementsByClassName(
            (event: TouchEvent) => {
                event.cancelBubble = true;

        this.scrollElement.addEventListener('touchend', (event: TouchEvent) => {
            event.cancelBubble = true;

Apply this directive for ion-content.

<ion-content scrollCatcher>
<ion-refresher (ionRefresh)="doRefresh($event)">

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


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;

ion-scroll is not there in ionic 4, do you have any solution for this?