diff --git a/addon/components/paper-backdrop.hbs b/addon/components/paper-backdrop.hbs
index 04b88bae5..8ab4c5e6e 100644
--- a/addon/components/paper-backdrop.hbs
+++ b/addon/components/paper-backdrop.hbs
@@ -1,5 +1,6 @@
 {{! template-lint-disable no-invalid-interactive }}
 <md-backdrop
+  {{lock-body}}
   {{on "click" (fn this.sendClickAction @onClick)}}
   {{on "touchEnd" (fn this.sendClickAction @onClick)}}
   {{css-transition
@@ -13,4 +14,12 @@
   style={{if @fixed 'position:fixed;'}}
   ...attributes>
   {{yield}}
-</md-backdrop>
\ No newline at end of file
+</md-backdrop>
+
+{{!-- TODO once we move to a v2 addon we should be able to import a style properly here. I added this to prevent us needing to mess with complicated style build systems --}}
+{{!-- template-lint-disable no-forbidden-elements --}}
+<style>
+  .ember-paper-lockbody {
+    overflow: hidden;
+  }
+</style>
\ No newline at end of file
diff --git a/addon/components/paper-sidenav-container.js b/addon/components/paper-sidenav-container.js
index c1ae4e8db..0bd8dfc0b 100644
--- a/addon/components/paper-sidenav-container.js
+++ b/addon/components/paper-sidenav-container.js
@@ -1,11 +1,9 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */
+/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
 /**
  * @module ember-paper
  */
 import Component from '@ember/component';
 
-import { htmlSafe } from '@ember/template';
-
 /**
  * @class PaperSidenavContainer
  * @extends Ember.Component
@@ -13,5 +11,4 @@ import { htmlSafe } from '@ember/template';
 export default Component.extend({
   classNames: ['flex', 'layout-row'],
   attributeBindings: ['style'],
-  style: htmlSafe('overflow: hidden')
 });
diff --git a/addon/modifiers/lock-body.js b/addon/modifiers/lock-body.js
new file mode 100644
index 000000000..75a4ce543
--- /dev/null
+++ b/addon/modifiers/lock-body.js
@@ -0,0 +1,16 @@
+import { modifier } from 'ember-modifier';
+
+const LOCK_BODY_CLASS = 'ember-paper-lockbody';
+
+export default modifier(
+  function lockBody(/*element /*, positional, named*/) {
+    document.querySelector('body').classList.add(LOCK_BODY_CLASS);
+
+    return () => {
+      document.querySelector('body').classList.remove(LOCK_BODY_CLASS);
+    };
+  },
+  {
+    eager: false,
+  }
+);
diff --git a/app/modifiers/lock-body.js b/app/modifiers/lock-body.js
new file mode 100644
index 000000000..147b15655
--- /dev/null
+++ b/app/modifiers/lock-body.js
@@ -0,0 +1 @@
+export { default } from 'ember-paper/modifiers/lock-body';
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
index 660e1a751..b02fe1e18 100644
--- a/tests/dummy/app/styles/app.scss
+++ b/tests/dummy/app/styles/app.scss
@@ -10,29 +10,9 @@ $accent: 'pink';
  * Needed styles to set correct widths.
  */
 
-body {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-body.ember-application {
-  flex-direction: row;
-  flex: 1;
-  display: flex;
-}
-
-body > div.ember-view {
-  flex-direction: row;
-  flex: 1;
-  display: flex;
-}
-
-.site-nav-container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+md-sidenav.md-locked-open {
+  position: sticky !important;
+  height: 100vh;
 }
 
 md-toolbar.md-warn {