src/assets/css/hide-scrollbar.scss

@@ -1,15 +1,10 @@
-body {
+.hide-scrollbar-mask {
+  width: 100%;
+  height: 100%;
   overflow: hidden;
 }
 
-#root {
-  height: 100vh;
-  width: 100vw;
-}
-
-#hide-scrollbar {
+.hide-scrollbar-selection {
   position: relative;
-  height: 100vh;
-  width: 100vw;
   overflow: scroll;
 }

src/components/HideScrollbar.tsx

@@ -151,15 +151,17 @@ const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props
 
     return (
         <>
-            <div
-                ref={rootRef}
-                id={'hide-scrollbar'}
-                style={{
-                    width: `calc(100vw + ${verticalScrollbarWidth}px)`,
-                    height: `calc(100vh + ${horizontalScrollbarWidth}px`
-                }}
-            >
-                {props.children}
+            <div className={'hide-scrollbar-mask'}>
+                <div
+                    ref={rootRef}
+                    className={'hide-scrollbar-selection'}
+                    style={{
+                        width: `calc(100vw + ${verticalScrollbarWidth}px)`,
+                        height: `calc(100vh + ${horizontalScrollbarWidth}px`
+                    }}
+                >
+                    {props.children}
+                </div>
             </div>
         </>
     )