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

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index 4cedcc02bfa9ad05a793bb777dde1089fd518c70..3b5943183250aa6ec5a72b05b12aa5df28cb386f 100644 (file)
--- 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 2f91f2265f22697b1002f165cd8d3def268c9aa0..2126791e759e14cf1fb1af8672ef6b89107b6c1f 100644 (file)
--- 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