fix broken scroll on mobile

src/theme/Layout/styles.scss

@@ -24,6 +24,7 @@
 }
 
 :root {
+  &,
   body {
     overflow-x: hidden !important;
   }

src/theme/Navbar/index.scss

@@ -13,11 +13,12 @@
   background: none;
 }
 
-:root {
-}
-
 @include utils.responsive('lg', 'down') {
   .navbar {
     background: var(--ifm-background-surface-color);
   }
 }
+
+.overflow-hidden {
+  overflow: hidden !important;
+}

src/theme/Navbar/index.tsx

@@ -1,12 +1,27 @@
-import React from 'react'
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'
+import type { WrapperProps } from '@docusaurus/types'
 import Navbar from '@theme-original/Navbar'
 import type NavbarType from '@theme/Navbar'
-import type { WrapperProps } from '@docusaurus/types'
+import React, { useEffect } from 'react'
 import './index.scss'
 
 type Props = WrapperProps<typeof NavbarType>
 
 export default function NavbarWrapper(props: Props): JSX.Element {
+  const mobileSidebar = useNavbarMobileSidebar()
+
+  useEffect(() => {
+    if (mobileSidebar.shown) {
+      document
+        .querySelector('#__docusaurus')
+        ?.classList?.add?.('overflow-hidden')
+    } else {
+      document
+        .querySelector('#__docusaurus')
+        ?.classList?.remove?.('overflow-hidden')
+    }
+  }, [mobileSidebar.shown])
+
   return (
     <>
       <Navbar {...props} />