Ionic content does not scroll when you add tap | press gesture

Hello All, This ionic scroll issue is mostly related to Android devices. I always face this issue in android only. It's within <ion-item> or <ion-card> or maybe some other tags. Please check below description for more information -


1. A solution for (tap) gesture -

To solve this issue please replace tap event with the click.

Issue -

<ion-item (tap)=“yourFunction()">

</ion-item>


Solution -
<ion-item (click)=“yourFunction()">

</ion-item>




2. A solution for (press) gesture -

Issue -
<ion-item (press)=“yourFunction()">

</ion-item>


Solution -
<ion-item (long-press)=“yourFunction()">

</ion-item>


First please create (press directive with selector name as long-press) a directive to solve this issue -

Now add below code in press directive -

import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { Gesture } from "ionic-angular/gestures/gesture";

@Directive({
  selector: '[long-press]'
})

export class PressDirective implements OnInit, OnDestroy {
  el: HTMLElement;
  pressGesture: Gesture;
  @Output('long-press') onPressRelease: EventEmitter = new EventEmitter();

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  ngOnInit() {
    this.pressGesture = new Gesture(this.el);
    this.pressGesture.listen();

    this.pressGesture.on('press', (event) => {
      this.onPressRelease.emit('released');
    });
  }

  ngOnDestroy() {
    this.pressGesture.destroy();
  }
}


Now import this directive in your module file -

import { PressDirective } from '../directives/press/press';


@NgModule({
  declarations: [
    MyApp,
PressDirective,
],


});



Please check above all details. Hope so this will resolve your problem. If you still having any issue please add a comment on this post with some details. I will try to resolve your issue. Thanks!