Refresher in scrollable slides

Ionic Framework ionic-v3
1

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?

2 Likes
2

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

3

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

4

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
 */
@Directive({
    selector: '[scrollCatcher]'
})
export class ScrollCatcherDirective {

    private scrollElement: HTMLElement;

    constructor(private el: ElementRef) {
    }

    ngOnInit() {
        this.scrollElement = this.el.nativeElement.getElementsByClassName(
            'scroll-content',
        )[0];
        this.scrollElement.addEventListener(
            'touchstart',
            (event: TouchEvent) => {
                event.stopImmediatePropagation();
                event.cancelBubble = true;
            },
        );

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

Apply this directive for ion-content.

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

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

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

7