From a8129e8afff86c3d36c5c211e97174a6a4b6743a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 11:14:24 +0800
Subject: [PATCH] Optimize HideScrollbar

---
 .../css/components/common/hide-scrollbar.scss  |  7 +++++--
 src/components/common/HideScrollbar.tsx        | 18 ++++++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index df0b567..1d604dc 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -1,6 +1,7 @@
 @use '@/assets/css/constants' as constants;
 
 .hide-scrollbar-mask {
+  position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -49,8 +50,9 @@
     padding: 12px 4px;
     width: 16px;
     height: 100%;
-    right: 0;
+    left: 100%;
     top: 0;
+    transform: translateX(-100%);
   }
 
   .horizontal-scrollbar {
@@ -58,6 +60,7 @@
     width: 100%;
     height: 16px;
     left: 0;
-    bottom: 0;
+    top: 100%;
+    transform: translateY(-100%);
   }
 }
\ No newline at end of file
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 8ffa513..44e158f 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -459,8 +459,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     className={'hide-scrollbar-selection'}
                     tabIndex={0}
                     style={{
-                        width: `calc(100vw + ${verticalScrollbarWidth}px)`,
-                        height: `calc(100vh + ${horizontalScrollbarWidth}px)`,
+                        width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
+                        height: `calc(${maskRef.current?.clientHeight}px + ${horizontalScrollbarWidth}px)`,
                         touchAction: isPreventAnyScroll ? 'none' : '',
                         msTouchAction: isPreventAnyScroll ? 'none' : ''
                     }}
@@ -482,6 +482,13 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                             verticalScrollbarLength === 100)
                     }
                     className={'scrollbar vertical-scrollbar'}
+                    style={{
+                        height: maskRef.current ? maskRef.current?.clientHeight - 1 : undefined,
+                        top: maskRef.current?.clientTop,
+                        left: maskRef.current
+                            ? maskRef.current?.clientLeft + maskRef.current?.clientWidth - 1
+                            : undefined
+                    }}
                 >
                     <div className={'box'}>
                         <div
@@ -512,6 +519,13 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                             horizontalScrollbarLength === 100)
                     }
                     className={'scrollbar horizontal-scrollbar'}
+                    style={{
+                        width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined,
+                        left: maskRef.current?.clientLeft,
+                        top: maskRef.current
+                            ? maskRef.current?.clientTop + maskRef.current?.clientHeight - 1
+                            : undefined
+                    }}
                 >
                     <div className={'box'}>
                         <div