Optimize stylesheet in HideScrollbar

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,9 +151,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props
 
     return (
         <>
+            <div className={'hide-scrollbar-mask'}>
                 <div
                     ref={rootRef}
-                id={'hide-scrollbar'}
+                    className={'hide-scrollbar-selection'}
                     style={{
                         width: `calc(100vw + ${verticalScrollbarWidth}px)`,
                         height: `calc(100vh + ${horizontalScrollbarWidth}px`
@@ -161,6 +162,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, PropsWithChildren>((props
                 >
                     {props.children}
                 </div>
+            </div>
         </>
     )
 })