From e6eb9b09190505b4d6f76655030b0b69902a8448 Mon Sep 17 00:00:00 2001
From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sun, 17 Jun 2018 23:52:41 +0200
Subject: [PATCH] fix: keep a scrollbar on document when Reveal opens #7831

#11065 was intented to avoid double scrollbars from a Reveal modal, but removing all scrollbars when the modal opens changes the page content width and the content shift. This is a regression of #7831.

The current solution is a mix between the two previous fixes:
* Modal may have a scrollbar or not, following its content height
* Body has no scrollbar and prevent any scroll
* Document may have a scrollbar, following its content height (controlled in JS)

Changes:
* add the `zf-has-scroll` global html modifer and toggle it on Reveal opening/closing
* always prevent scroll on body instead of html tag like in #10583

See https://github.com/zurb/foundation-sites/issues/10791#issuecomment-377861523
Closes #7831
---
 js/foundation.reveal.js      |  4 ++++
 scss/components/_reveal.scss | 10 +++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index 4cedcc02b..3b5943183 100644
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -325,11 +325,15 @@ class Reveal extends Plugin {
   }
 
   _addRevealOpenClasses() {
+    if ($(document).height() > $(window).height()) {
+      $('html').addClass('zf-has-scroll');
+    }
     $('html').addClass('is-reveal-open');
   }
 
   _removeRevealOpenClasses() {
     $('html').removeClass('is-reveal-open');
+    $('html').removeClass('zf-has-scroll');
   }
 
   /**
diff --git a/scss/components/_reveal.scss b/scss/components/_reveal.scss
index 2f91f2265..2126791e7 100644
--- a/scss/components/_reveal.scss
+++ b/scss/components/_reveal.scss
@@ -132,7 +132,15 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   html.is-reveal-open {
     position: fixed;
     width: 100%;
-    overflow: hidden;
+    overflow-y: hidden;
+
+    &.zf-has-scroll {
+      overflow-y: scroll;
+    }
+
+    body { // sass-lint:disable-line no-qualifying-elements
+      overflow-y: hidden;
+    }
   }
 
   // Overlay
-- 
2.47.2