compensate scrollbar via CSS variable

2 years ago · 7743c1a22f
2 changed files with 2 additions and 1 deletions
--- a/src/Fancybox/Fancybox.js
+++ b/src/Fancybox/Fancybox.js
@ -746,7 +746,7 @@ class Fancybox extends Base {

      $style.id = id;
      $style.type = "text/css";
-      $style.innerHTML = `.compensate-for-scrollbar {padding-right: ${scrollbarWidth}px;}`;
+      $style.innerHTML = `.compensate-for-scrollbar {--fancybox-scrollbar-compensate: ${scrollbarWidth}px;}`;

      document.getElementsByTagName("head")[0].appendChild($style);

--- a/src/Fancybox/scss/base.scss
+++ b/src/Fancybox/scss/base.scss
@ -5,6 +5,7 @@ html.with-fancybox {
 body.compensate-for-scrollbar {
  overflow: hidden !important;
  touch-action: none;
+  padding-right: var(--fancybox-scrollbar-compensate, 0);
 }

 .fancybox__container {