[beta.11] menu oberlay does not disable page scrolling

[Yomyer]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.11
   @angular-devkit/core       : 0.8.2
   @angular-devkit/schematics : 0.8.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.0, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 1.1.1, (and 13 other plugins)

System:

   ios-deploy : 1.9.2
   ios-sim    : 6.1.2
   NodeJS     : v10.10.0 (/usr/local/Cellar/node/10.10.0/bin/node)
   npm        : 6.4.1
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Describe the Bug
I'm using the menutype overlay and I'm noticing that if there's a content in the page with scroll it doesn't deactivate but allows scrolling.

Thanks.

[Yomyer]

I found a fairly clean solution. It is to create a directive that adds an ionOpen and ionClose listener to the menu component. This looks for ion-content that doesn't have a parent ion-menu and disables and enables scrollY depending on the event.

It works fine but only if you use the toggle button menu. Using the horizontal swipe you can move the scroll :'(

`import { MenuController } from '@ionic/angular';
import { Directive, Renderer2, ElementRef, OnInit, OnDestroy } from '@angular/core';

@directive({
selector: '[menuFix]'
})
export class MenuFixDirective implements OnInit, OnDestroy {
private listener:

get menu(): HTMLIonMenuElement {
    return this.el.nativeElement;
}
constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private menuCtrl: MenuController
) {
}

ngOnInit(): void {
    this.listener = this.renderer.listen(this.menu, 'ionOpen', (evt) => {
        this.disabled(false);

    });
    this.listener = this.renderer.listen(this.menu, 'ionClose', (evt) => {
        this.disabled(true);
    });
}

disabled(disabled: boolean) {
    const main = document.querySelector('[main]');
    const contents = Array.from(main.querySelectorAll('ion-content'));
    contents.forEach((content: HTMLIonContentElement) => {
        if (!content.closest('ion-menu')) {
            content.scrollY = disabled;
        }
    });
}

ngOnDestroy(): void {
    this.listener();
}

}`

Further research :)

PD: I've seen what happens with dialogs/modal, too.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.