diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 4c02805e3b..e7a155e107 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -38,6 +38,10 @@
       font-style: italic;
       font-display: swap;
     }
+    :root {
+      --scrollbar-offset: 0px;
+      --scrollbar-offset-negative: 0px;
+    }
     html {
       background-color: white;
       scrollbar-gutter: stable both-edges;
@@ -82,6 +86,18 @@
     }
   </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>
+
   {% include "scripts.html" %}
   <link rel="apple-touch-icon" sizes="180x180" href="{{ staticCDNHost }}/static/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="{{ staticCDNHost }}/static/favicon-32x32.png">
diff --git a/web/index.html b/web/index.html
index 28b3a3e3d7..c3aed436a9 100644
--- a/web/index.html
+++ b/web/index.html
@@ -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>
