Preserve document scrollbar when showing modal

If the browser is showing a scrollbar that takes up space before kpop
opens then opening the modal will cause the scrollbar to disappear
and could reflow the page. Set overflowY to "scroll" if the
document is bigger than the window to ensure the scrollbar remains.

Author: sfnelson

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    katalyst-kpop (3.2.6)
+    katalyst-kpop (3.2.7)
       katalyst-html-attributes
       turbo-rails
       view_component

app/javascript/kpop/controllers/scrim_controller.js

@@ -130,12 +130,14 @@ export default class ScrimController extends Controller {
     this.zIndexValue = zIndex;
     this.scrollY = top;
 
-    this.previousPosition = document.body.style.position;
-    this.previousTop = document.body.style.top;
-
     this.element.style.zIndex = this.zIndexValue;
     document.body.style.top = `-${top}px`;
     document.body.style.position = "fixed";
+    document.body.style.paddingRight = `-${this.scrollPadding}px`;
+
+    if (document.body.scrollHeight > window.innerHeight) {
+      document.body.style.overflowY = "scroll";
+    }
   }
 
   /**
@@ -145,22 +147,13 @@ export default class ScrimController extends Controller {
     this.captiveValue = this.defaultCaptiveValue;
     this.zIndexValue = this.defaultZIndexValue;
 
-    resetStyle(this.element, "z-index", null);
-    resetStyle(document.body, "position", null);
-    resetStyle(document.body, "top", null);
+    this.element.style.removeProperty("z-index");
+    document.body.style.removeProperty("position");
+    document.body.style.removeProperty("top");
+    document.body.style.removeProperty("overflow-y");
 
     window.scrollTo({ left: 0, top: this.scrollY, behavior: "instant" });
 
     delete this.scrollY;
-    delete this.previousPosition;
-    delete this.previousTop;
-  }
-}
-
-function resetStyle(element, property, previousValue) {
-  if (previousValue) {
-    element.style.setProperty(property, previousValue);
-  } else {
-    element.style.removeProperty(property);
   }
 }

katalyst-kpop.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name    = "katalyst-kpop"
-  spec.version = "3.2.6"
+  spec.version = "3.2.7"
   spec.authors = ["Katalyst Interactive"]
   spec.email   = ["[email protected]"]