Allow certain elements to be dragged when having a refresher

Currently I have a refresher on my page, a very simple one, that listens to ionRefresh. I also have a google maps on that page in which I place pins, that require updates on refresh.

My problem is that when I scroll on the google maps, the refresher is also being activated. That is not something I want.

I want to prevent the refresher from activating when my swipe starts somewhere on the map. I already tried using event.target.complete() and event.target.cancel() in a (ionStart) method. that works, but after that it completely disables the refresher.

Is there a way to ignore the refresher when I swipe on some element like a maps that has dragging features on it’s own?

Ionic:

Ionic CLI : 6.5.0 (/usr/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.901.0
@angular-devkit/schematics : 9.1.0
@angular/cli : 9.1.0
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 8 other plugins)

Utility:

cordova-res : not installed
native-run (update available: 1.0.0) : 0.3.0

System:

Android SDK Tools : 26.1.1 (/home//Android/Sdk)
NodeJS : v10.19.0 (/usr/bin/node)
npm : 6.14.4
OS : Linux 4.15
Xcode : xcbuild version 0.1 Build version 1

So far I do not find this forum very helpful, but I am a nice guy and I am going to help out others having the same issue. This solution is not mine, I found it on other fora for ionic 3 and earlier, and transpiled it to a ionic4/5 solution.

reference the element you want to block activation of the refresher for, add the following code to your component.

@ViewChild(‘scrollable’) scrollable;

async ionViewDidEnter() {
this.scrollable.addEventListener(‘touchstart’, (event: TouchEvent) => {
event.stopImmediatePropagation();
event.cancelBubble = true;
});
}

the scrollable may reference a ion-content or a ionic specific element, in that case try “this.scrollable.getScrollElement()” “this.scrollable.el”

use

“if (scrollElement.scrollTop > 10) {
event.stopImmediatePropagation();
event.cancelBubble = true;
}”

If you need the refresher to work if your page is scrolled to the top.