Add computed scrollbar gutter CSS vars

2024-12-02 17:11:00 -06:00
parent 55eae34dc8
commit 69378a393c
2 changed files with 32 additions and 0 deletions
@@ -43,6 +43,10 @@
        font-style: italic;
        font-display: swap;
      }
+      :root {
+        --scrollbar-offset: 0px;
+        --scrollbar-offset-negative: 0px;
+      }
      html {
        background-color: white;
        scrollbar-gutter: stable both-edges;
@@ -86,6 +90,18 @@
        width: 100%;
      }
    </style>
+
+    <script>
+      try {
+        var windowWidth = window.innerWidth;
+        var html = document.documentElement;
+        var htmlWidth = html.getBoundingClientRect().width;
+        var scrollbarWidth = (windowWidth - htmlWidth) / 2;
+        var scrollbarOffset = scrollbarWidth / 2;
+        html.style.setProperty('--scrollbar-offset', `${scrollbarOffset}px`);
+        html.style.setProperty('--scrollbar-offset-negative', `-${scrollbarOffset}px`);
+      } catch (error) {}
+    </script>
  </head>

  <body>