updated demo to handle scrolling in a way that doesn't force scroll tracks

website/source/assets/javascripts/demo/views/demo.js

@@ -24,6 +24,8 @@ Demo.DemoView = Ember.View.extend({
         overlay    = $('.sidebar-overlay'),
         element    = this.$();
 
+    $('body').addClass('demo-active');
+
     overlay.addClass('active');
 
     overlay.on('click', function() {
@@ -35,27 +37,6 @@ Demo.DemoView = Ember.View.extend({
 
     // Focus
     element.find('input.shell')[0].focus();
-
-    // Hijack scrolling to only work within terminal
-    //
-    element.on('DOMMouseScroll mousewheel', function(e) {
-        e.preventDefault();
-    });
-
-    $('.demo-terminal').on('DOMMouseScroll mousewheel', function(e) {
-      var scrollTo = null;
-
-      if (e.type == 'mousewheel') {
-        scrollTo = (e.originalEvent.wheelDelta * -1);
-      } else if (e.type == 'DOMMouseScroll') {
-        scrollTo = 40 * e.originalEvent.detail;
-      }
-
-      if (scrollTo) {
-        e.preventDefault();
-        $(this).scrollTop(scrollTo + $(this).scrollTop());
-      }
-    });
   },
 
   willDestroyElement: function() {
@@ -66,8 +47,10 @@ Demo.DemoView = Ember.View.extend({
 
     element.fadeOut(400);
 
-    // Allow scrolling
-    $('body').unbind('DOMMouseScroll mousewheel');
+    $('body').removeClass('demo-active');
+
+    // reset scroll to top after closing demo
+    window.scrollTo(0, 0);
   },
 
 });

website/source/assets/javascripts/demo/views/step.js

@@ -60,8 +60,10 @@ Demo.DemoStepView = Ember.View.extend({
     // Focus the input
     element.find('input.shell')[0].focus();
 
-    // Scroll to the bottom of the element
-    element.scrollTop(element[0].scrollHeight);
+    // guarantees that the log is scrolled when updated
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      window.scrollTo(0, document.body.scrollHeight);
+    });
 
   }.observes('controller.logs.length')
 });

website/source/assets/stylesheets/_demo.scss

@@ -1,29 +1,52 @@
+html,
+body {
+    height: 100%;
+    min-height: 100%;
+}
+
+.demo-active {
+    background: #000;
+
+    #demo-app {
+        min-height: 100%;
+    }
+
+    #header,
+    #sidebar,
+    #hero,
+    #content,
+    #footer,
+    .sidebar-overlay {
+        display: none;
+    }
+}
+
 .demo-overlay {
-    z-index: 1000;
     background: black;
-    bottom: 0;
-    top: 0;
-    left: 0;
     width: 100%;
     height: 100%;
-    max-height: 100%;
+    min-height: 100%;
     line-height: 1.3;
-    position: fixed;
+    overflow: auto;
     color: #DDDDDD;
-    overflow: scroll;
     display: block;
     font-size: 15px;
     font-family: 'Ubuntu Mono', 'Monaco', monospace;
     @include box-shadow(0px -2px 30px 0px rgba(0, 0, 0, 0.40));
+    z-index: 1000;
 }
 
 .instruction-wrapper {
+    background: #000;
     width: 100%;
     padding: 20px;
+    position: fixed;
+    top: 0;
+    z-index: 5;
 }
 
 .instruction {
-    overflow: scroll;
+    overflow: auto;
     padding: 10px;
     max-width: 800px;
     min-width: 400px;
@@ -58,7 +81,7 @@
 
 .close-terminal{
     display: inline-block;
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
     width: 60px;
@@ -70,6 +93,7 @@
     @include lato-light();
     transition: all 250ms ease-in;
     cursor: pointer;
+    z-index: 10;
 
     &:hover{
         text-decoration: none;
@@ -82,16 +106,19 @@
 .demo-terminal {
     background-color: black;
     padding: 25px 65px 0 25px;
+    padding-top: 250px;
     padding-bottom: 50px;
+    min-height: 100%;
     width: 100%;
-    top: 225px;
-    bottom: 0;
     display: block;
-    overflow: scroll;
-    position: absolute;
+    overflow: auto;
+    position: relative;
+    z-index: 1;
 
     &.fullscreen {
-        top: 0;
+        min-height: 300px;
+        padding-top: 20px;
+        z-index: 6;
     }
 
     .log {