Add scrollbar width setting to HideScrollbar

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;
+    }
   }
 }

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={{