From 91d548078018d72d714b83a45f0502b1d1adfb9c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 11:33:14 +0800
Subject: [PATCH] Add scrollbar width setting to HideScrollbar

---
 .../css/components/common/hide-scrollbar.scss      | 10 ++++++++--
 src/components/common/HideScrollbar.tsx            | 14 +++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 1d604dc..780168a 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -48,19 +48,25 @@
 
   .vertical-scrollbar {
     padding: 12px 4px;
-    width: 16px;
     height: 100%;
     left: 100%;
     top: 0;
     transform: translateX(-100%);
+
+    .box {
+      width: 8px;
+    }
   }
 
   .horizontal-scrollbar {
     padding: 4px 12px;
     width: 100%;
-    height: 16px;
     left: 0;
     top: 100%;
     transform: translateY(-100%);
+
+    .box {
+      height: 8px;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 44e158f..2cf3b8f 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -11,6 +11,8 @@ interface HideScrollbarProps
     isShowHorizontalScrollbar?: boolean
     isHiddenHorizontalScrollbarWhenFull?: boolean
     minWidth?: string | number
+    minHeight?: string | number
+    scrollbarWidth?: string | number
 }
 
 export interface HideScrollbarElement {
@@ -159,6 +161,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         isShowHorizontalScrollbar,
         isHiddenHorizontalScrollbarWhenFull,
         minWidth,
+        minHeight,
+        scrollbarWidth,
         ..._props
     } = props
 
@@ -471,7 +475,11 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     onTouchMove={isPreventAnyScroll ? handleDefaultTouchmove : undefined}
                     onScroll={handleDefaultScroll}
                 >
-                    <div className={'hide-scrollbar-content'} ref={contentRef} style={{ minWidth }}>
+                    <div
+                        className={'hide-scrollbar-content'}
+                        ref={contentRef}
+                        style={{ minWidth, minHeight }}
+                    >
                         {props.children}
                     </div>
                 </div>
@@ -490,7 +498,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                             : undefined
                     }}
                 >
-                    <div className={'box'}>
+                    <div className={'box'} style={{ width: scrollbarWidth }}>
                         <div
                             className={'block'}
                             style={{
@@ -527,7 +535,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                             : undefined
                     }}
                 >
-                    <div className={'box'}>
+                    <div className={'box'} style={{ height: scrollbarWidth }}>
                         <div
                             className={'block'}
                             style={{