diff --git a/src/Fancybox/Fancybox.js b/src/Fancybox/Fancybox.js
index 9e93c65..ad61d3d 100644
--- a/src/Fancybox/Fancybox.js
+++ b/src/Fancybox/Fancybox.js
@@ -825,7 +825,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);
 
diff --git a/src/Fancybox/scss/base.scss b/src/Fancybox/scss/base.scss
index 0cc0d0b..3c8094f 100644
--- 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 {