fixed issue #7831

based on https://stackoverflow.com/a/13891717/968244

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index e02ace43e1ca30afb038002d02be1c60fd5b41c6..250587a7e1a65afd0236f8b5d4a9b38c7deacdac 100644 (file)
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -179,6 +179,29 @@ class Reveal extends Plugin {
     else{ this.close(); }
   }
 
+  /**
+  * Disables the scroll when Reveal is shown to prevent the background from shifting
+  */
+  _disableScroll(){
+    if ($(document).height() > $(window).height()) {
+      var scrollTop = $(window).scrollTop();
+      $("html")
+        .addClass("disable-scroll")
+        .css("top", -scrollTop);
+    }
+  }
+
+  /**
+  * Reenables the scroll when Reveal closes
+  */
+  _enableScroll(){
+    var scrollTop = parseInt($("html").css("top"));
+    $("html")
+      .removeClass("disable-scroll")
+      .css("top", "");
+    $(window).scrollTop(-scrollTop);
+  }
+
 
   /**
    * Opens the modal controlled by `this.$anchor`, and closes all others by default.
@@ -238,6 +261,8 @@ class Reveal extends Plugin {
       this.$element.trigger('closeme.zf.reveal', this.id);
     }
 
+    this._disableScroll();
+
     var _this = this;
 
     function addRevealOpenClasses() {
@@ -395,6 +420,8 @@ class Reveal extends Plugin {
 
       _this.$element.attr('aria-hidden', true);
 
+      _this._enableScroll();
+
       /**
       * Fires when the modal is done closing.
       * @event Reveal#closed

diff --git a/scss/components/_reveal.scss b/scss/components/_reveal.scss
index b77de14273eb7a59ef8d459443e36440c306811f..a74c545f3af12d98b74f86346b2309203b01db6b 100644 (file)
--- a/scss/components/_reveal.scss
+++ b/scss/components/_reveal.scss
@@ -178,3 +178,11 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
     }
   }
 }
+
+
+/// Disables the scroll when Reveal is shown to prevent the background from shifting
+html.disable-scroll {
+    position: fixed;
+    width: 100%;
+    overflow-y: scroll;
+}