From f1433c63149270d77131957544c28e644ef88e65 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 1 Jul 2016 21:44:53 -0500
Subject: [PATCH] refactor(backdrop): place disable-scroll class on ion-app

---
 src/components/app/app.ts           |  4 +++-
 src/components/app/structure.scss   |  5 +++++
 src/components/backdrop/backdrop.ts | 26 ++++++++++----------------
 src/components/scroll/scroll.scss   |  5 -----
 4 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/components/app/app.ts b/src/components/app/app.ts
index a978929d0cd..8ce0ed24ffd 100644
--- a/src/components/app/app.ts
+++ b/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;
diff --git a/src/components/app/structure.scss b/src/components/app/structure.scss
index ea0b34c866d..c7f55cff3e1 100644
--- a/src/components/app/structure.scss
+++ b/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],
diff --git a/src/components/backdrop/backdrop.ts b/src/components/backdrop/backdrop.ts
index 3610518a63e..87018175703 100644
--- a/src/components/backdrop/backdrop.ts
+++ b/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,25 +19,19 @@ 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;
       }
     }
   }
@@ -45,18 +39,18 @@ export class Backdrop {
   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;
     }
   }
diff --git a/src/components/scroll/scroll.scss b/src/components/scroll/scroll.scss
index ba88c4fe260..392674304a9 100644
--- a/src/components/scroll/scroll.scss
+++ b/src/components/scroll/scroll.scss
@@ -35,8 +35,3 @@ ion-scroll {
   }
 
 }
-
-body.disable-scroll scroll-content {
-  overflow-y: hidden;
-  overflow-x: hidden;
-}