Optimize HideScrollbar

src/assets/css/components/common/hide-scrollbar.scss

@@ -68,14 +68,14 @@
   }
 
   .vertical-scrollbar {
-    padding: 12px 4px;
+    padding: 12px 2px;
     height: 100%;
     left: 100%;
     top: 0;
     transform: translateX(-100%);
 
     .box {
-      width: 8px;
+      width: 6px;
     }
   }
 

src/assets/css/pages/tools-framework.scss

@@ -11,5 +11,6 @@ body {
 
 .right-panel {
   flex: 1;
+  width: 0;
   background-color: constants.$background-color;
 }

src/components/common/HideScrollbar.tsx

@@ -13,7 +13,6 @@ interface HideScrollbarProps
     minWidth?: string | number
     minHeight?: string | number
     scrollbarWidth?: string | number
-    animationTransitionTime?: number
     autoHideWaitingTime?: number
 }
 
@@ -174,9 +173,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         minWidth,
         minHeight,
         scrollbarWidth,
-        animationTransitionTime,
         autoHideWaitingTime,
         children,
+        style,
+        className,
         ..._props
     } = props
 
@@ -412,35 +412,33 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     }
 
     useEffect(() => {
-        const windowResizeListener = () => {
+        const resizeObserver = new ResizeObserver(() => {
-            setTimeout(() => {
+            setVerticalScrollbarWidth(
-                setVerticalScrollbarWidth(
+                (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
-                    (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
+            )
-                )
+            setHorizontalScrollbarWidth(
-                setHorizontalScrollbarWidth(
+                (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
-                    (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
+            )
+
+            rootRef.current &&
+                setVerticalScrollbarLength(
+                    (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
                 )
 
-                rootRef.current &&
+            rootRef.current &&
-                    setVerticalScrollbarLength(
+                setHorizontalScrollbarLength(
-                        (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) *
+                    (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-                            100
+                )
-                    )
+            refreshLayout()
+        })
+        maskRef.current && resizeObserver.observe(maskRef.current)
 
-                rootRef.current &&
+        return () => {
-                    setHorizontalScrollbarLength(
+            maskRef.current && resizeObserver.unobserve(maskRef.current)
-                        (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-                    )
-                refreshLayout()
-            }, animationTransitionTime)
-
-            return windowResizeListener
         }
-        setTimeout(() => {
+    }, [])
-            windowResizeListener()
-        }, 1000)
-        window.addEventListener('resize', windowResizeListener())
 
+    useEffect(() => {
         rootRef.current?.removeEventListener('wheel', wheelListenerRef.current)
         if (isPreventAnyScroll) {
             const handleDefaultWheel = (event: WheelEvent) => {
@@ -462,28 +460,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
             wheelListenerRef.current = handleDefaultWheel
             rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
         }
-
+    }, [isPreventAnyScroll, isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll])
-        rootRef.current &&
-            setVerticalScrollbarLength(
-                (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
-            )
-
-        rootRef.current &&
-            setHorizontalScrollbarLength(
-                (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-            )
-
-        return () => {
-            window.removeEventListener('resize', windowResizeListener)
-        }
-    }, [
-        animationTransitionTime,
-        horizontalScrollbarLength,
-        isPreventAnyScroll,
-        isPreventHorizontalScroll,
-        isPreventScroll,
-        isPreventVerticalScroll
-    ])
 
     return (
         <>
@@ -507,13 +484,14 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
             >
                 <div
                     ref={rootRef}
-                    className={'hide-scrollbar-selection'}
+                    className={`hide-scrollbar-selection${className ? ` ${className}` : ''}`}
                     tabIndex={0}
                     style={{
                         width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
                         height: `calc(${maskRef.current?.clientHeight}px + ${horizontalScrollbarWidth}px)`,
                         touchAction: isPreventAnyScroll ? 'none' : '',
-                        msTouchAction: isPreventAnyScroll ? 'none' : ''
+                        msTouchAction: isPreventAnyScroll ? 'none' : '',
+                        ...style
                     }}
                     {..._props}
                     onMouseDown={isPreventAnyScroll ? handleDefaultMouseDown : undefined}

src/components/common/sidebar/SidebarScroll.tsx

@@ -21,7 +21,6 @@ const SidebarScroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>(
             <HideScrollbar
                 isShowVerticalScrollbar={true}
                 scrollbarWidth={2}
-                animationTransitionTime={300}
                 autoHideWaitingTime={800}
                 ref={hideScrollbarRef}
             >