refactor(backdrop): place disable-scroll class on ion-app

src/components/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentResolver, EventEmitter, Injectable, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ComponentResolver, EventEmitter, HostBinding, Injectable, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 
 import { ClickBlock } from '../../util/click-block';
@@ -297,6 +297,8 @@ export class AppRoot {
     });
   }
 
+  @HostBinding('class.disable-scroll') disableScroll: boolean = false;
+
 }
 
 const CLICK_BLOCK_BUFFER_IN_MILLIS = 64;

src/components/app/structure.scss

@@ -211,6 +211,11 @@ ion-content.js-scroll > scroll-content {
   will-change: initial;
 }
 
+.disable-scroll ion-page > ion-content > scroll-content {
+  overflow-y: hidden;
+  overflow-x: hidden;
+}
+
 
 [nav-viewport],
 [nav-portal],

src/components/backdrop/backdrop.ts

@@ -1,7 +1,7 @@
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 
-import { isTrueProperty} from '../../util/util';
-import { nativeRaf} from '../../util/dom';
+import { AppRoot } from '../app/app';
+import { isTrueProperty } from '../../util/util';
 
 const DISABLE_SCROLL = 'disable-scroll';
 
@@ -19,44 +19,38 @@ const DISABLE_SCROLL = 'disable-scroll';
 export class Backdrop {
   private static nuBackDrops: number = 0;
 
-  private static push() {
+  private static push(appRoot: AppRoot) {
     if (this.nuBackDrops === 0) {
-      nativeRaf(() => {
-        console.debug('adding .disable-scroll to body');
-        document.body.classList.add(DISABLE_SCROLL);
-      });
+      appRoot.disableScroll = true;
     }
     this.nuBackDrops++;
   }
 
-  private static pop() {
+  private static pop(appRoot: AppRoot) {
     if (this.nuBackDrops > 0) {
       this.nuBackDrops--;
 
       if (this.nuBackDrops === 0) {
-        nativeRaf(() => {
-          console.debug('removing .disable-scroll from body');
-          document.body.classList.remove(DISABLE_SCROLL);
-        });
+        appRoot.disableScroll = false;
       }
     }
   }
 
   private pushed: boolean = false;
   @Input() disableScroll = true;
 
-  constructor(public elementRef: ElementRef) {}
+  constructor(private _appRoot: AppRoot) {}
 
   ngOnInit() {
     if (isTrueProperty(this.disableScroll)) {
-      Backdrop.push();
+      Backdrop.push(this._appRoot);
       this.pushed = true;
     }
   }
 
   ngOnDestroy() {
     if (this.pushed) {
-      Backdrop.pop();
+      Backdrop.pop(this._appRoot);
       this.pushed = false;
     }
   }

src/components/scroll/scroll.scss

@@ -35,8 +35,3 @@ ion-scroll {
   }
 
 }
-
-body.disable-scroll scroll-content {
-  overflow-y: hidden;
-  overflow-x: hidden;
-}