fix(item-sliding): prevent scrolling during slide gesture (#23774)

resolves #19564
ionic-team · Aug 18, 2021 · e0c4ad3 · e0c4ad3
1 parent 621f4fa
commit e0c4ad3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
@@ -104,7 +104,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
           [mode]: true,
           'item-option-disabled': disabled,
           'item-option-expandable': expandable,
-          'ion-activatable': true,
+          'ion-activatable': true
         })}
       >
         <TagType

diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
@@ -43,6 +43,8 @@ export class ItemSliding implements ComponentInterface {
   private rightOptions?: HTMLIonItemOptionsElement;
   private optsDirty = true;
   private gesture?: Gesture;
+  private closestContent: HTMLIonContentElement | null = null;
+  private initialContentScrollY = true;
 
   @Element() el!: HTMLIonItemSlidingElement;
 
@@ -66,6 +68,8 @@ export class ItemSliding implements ComponentInterface {
 
   async connectedCallback() {
     this.item = this.el.querySelector('ion-item');
+    this.closestContent = this.el.closest('ion-content');
+
     await this.updateOptions();
 
     this.gesture = (await import('../../utils/gesture')).createGesture({
@@ -252,7 +256,23 @@ export class ItemSliding implements ComponentInterface {
     return !!(this.rightOptions || this.leftOptions);
   }
 
+  private disableContentScrollY() {
+    if (this.closestContent === null) { return }
+
+    this.initialContentScrollY = this.closestContent.scrollY;
+    this.closestContent.scrollY = false;
+  }
+
+  private restoreContentScrollY() {
+    if (this.closestContent === null) { return }
+
+    this.closestContent.scrollY = this.initialContentScrollY;
+  }
+
   private onStart() {
+    // Prevent scrolling during gesture
+    this.disableContentScrollY();
+
     openSlidingItem = this.el;
 
     if (this.tmr !== undefined) {
@@ -297,6 +317,9 @@ export class ItemSliding implements ComponentInterface {
   }
 
   private onEnd(gesture: GestureDetail) {
+    // Restore ion-content scrollY to initial value when gesture ends
+    this.restoreContentScrollY();
+
     const velocity = gesture.velocityX;
 
     let restingPoint = (this.openAmount > 0)