From 1254b1b8da9b95f830ba5a35cfd831b8238ef16d Mon Sep 17 00:00:00 2001
From: Igal Sapir <dev@21solutions.net>
Date: Sat, 26 Aug 2017 14:22:43 -0700
Subject: [PATCH] fixed issue #7831

based on https://stackoverflow.com/a/13891717/968244
---
 js/foundation.reveal.js      | 27 +++++++++++++++++++++++++++
 scss/components/_reveal.scss |  8 ++++++++
 2 files changed, 35 insertions(+)

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index e02ace43e..250587a7e 100644
--- 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 b77de1427..a74c545f3 100644
--- 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;
+}
-- 
2.47.2