fix(all): gesture controller can block scrolling

fixes #15725

core/src/components/backdrop/backdrop.tsx

@@ -1,5 +1,6 @@
 import { Component, ComponentInterface, Event, EventEmitter, Listen, Prop } from '@stencil/core';
 
+import { GESTURE_CONTROLLER } from '../../utils/gesture/gesture-controller';
 import { now } from '../../utils/helpers';
 
 @Component({
@@ -13,6 +14,9 @@ import { now } from '../../utils/helpers';
 export class Backdrop implements ComponentInterface {
 
   private lastClick = -10000;
+  private blocker = GESTURE_CONTROLLER.createBlocker({
+    disableScroll: true
+  });
 
   @Prop({ context: 'document' }) doc!: Document;
 
@@ -37,11 +41,13 @@ export class Backdrop implements ComponentInterface {
   @Event() ionBackdropTap!: EventEmitter<void>;
 
   componentDidLoad() {
-    registerBackdrop(this.doc, this);
+    if (this.stopPropagation) {
+      this.blocker.block();
+    }
   }
 
   componentDidUnload() {
-    unregisterBackdrop(this.doc, this);
+    this.blocker.destroy();
   }
 
   @Listen('touchstart', { passive: false, capture: true })
@@ -78,18 +84,3 @@ export class Backdrop implements ComponentInterface {
     };
   }
 }
-
-const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
-const activeBackdrops = new Set();
-
-function registerBackdrop(doc: Document, backdrop: any) {
-  activeBackdrops.add(backdrop);
-  doc.body.classList.add(BACKDROP_NO_SCROLL);
-}
-
-function unregisterBackdrop(doc: Document, backdrop: any) {
-  activeBackdrops.delete(backdrop);
-  if (activeBackdrops.size === 0) {
-    doc.body.classList.remove(BACKDROP_NO_SCROLL);
-  }
-}

core/src/components/content/content.scss

@@ -24,6 +24,7 @@
   --keyboard-offset: 0px;
   --offset-top: 0px;
   --offset-bottom: 0px;
+  --overflow: auto;
 
   display: block;
   position: relative;
@@ -75,11 +76,11 @@
 }
 
 .scroll-y {
-  overflow-y: auto;
+  overflow-y: var(--overflow);
 }
 
 .scroll-x {
-  overflow-x: auto;
+  overflow-x: var(--overflow);
 }
 
 .overscroll::before,

core/src/components/menu/menu.tsx

@@ -1,6 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 import { Animation, Config, Gesture, GestureDetail, MenuChangeEventDetail, MenuControllerI, MenuI, Mode, Side } from '../../interface';
+import { GESTURE_CONTROLLER } from '../../utils/gesture/gesture-controller';
 import { assert, isEndSide as isEnd } from '../../utils/helpers';
 
 @Component({
@@ -16,6 +17,7 @@ export class Menu implements ComponentInterface, MenuI {
   private animation?: Animation;
   private lastOnEnd = 0;
   private gesture?: Gesture;
+  private blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
 
   mode!: Mode;
 
@@ -195,6 +197,7 @@ export class Menu implements ComponentInterface, MenuI {
   }
 
   componentDidUnload() {
+    this.blocker.destroy();
     this.menuCtrl!._unregister(this);
     if (this.animation) {
       this.animation.destroy();
@@ -403,6 +406,7 @@ export class Menu implements ComponentInterface, MenuI {
     if (this.backdropEl) {
       this.backdropEl.classList.add(SHOW_BACKDROP);
     }
+    this.blocker.block();
     this.isAnimating = true;
   }
 
@@ -415,6 +419,9 @@ export class Menu implements ComponentInterface, MenuI {
     // emit opened/closed events
     this._isOpen = isOpen;
     this.isAnimating = false;
+    if (!this._isOpen) {
+      this.blocker.unblock();
+    }
 
     // add/remove backdrop click listeners
     this.enableListener(this, 'body:click', isOpen);

core/src/components/reorder-group/reorder-group.tsx

@@ -57,7 +57,6 @@ export class ReorderGroup implements ComponentInterface {
       queue: this.queue,
       gestureName: 'reorder',
       gesturePriority: 90,
-      disableScroll: true,
       threshold: 0,
       direction: 'y',
       passive: false,