diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss index a7f1b6c..799a993 100644 --- a/src/assets/css/components/common/hide-scrollbar.scss +++ b/src/assets/css/components/common/hide-scrollbar.scss @@ -13,6 +13,8 @@ .hide-scrollbar-content { display: inline-block; + width: 100%; + min-width: 900px; } } diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx index ded9e3b..d28e0f5 100644 --- a/src/components/common/HideScrollbar.tsx +++ b/src/components/common/HideScrollbar.tsx @@ -7,7 +7,9 @@ interface HideScrollbarProps isPreventVerticalScroll?: boolean isPreventHorizontalScroll?: boolean isShowVerticalScrollbar?: boolean + isHiddenVerticalScrollbarWhenFull?: boolean isShowHorizontalScrollbar?: boolean + isHiddenHorizontalScrollbarWhenFull?: boolean } export interface HideScrollbarElement { @@ -152,7 +154,9 @@ const HideScrollbar = forwardRef((prop isPreventVerticalScroll, isPreventHorizontalScroll, isShowVerticalScrollbar, + isHiddenVerticalScrollbarWhenFull, isShowHorizontalScrollbar, + isHiddenHorizontalScrollbarWhenFull, ..._props } = props @@ -368,6 +372,17 @@ const HideScrollbar = forwardRef((prop (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0) ) + rootRef.current && + setVerticalScrollbarLength( + (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100 + ) + console.log(horizontalScrollbarLength) + + rootRef.current && + setHorizontalScrollbarLength( + (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100 + ) + return windowResizeListener } setTimeout(() => { @@ -410,7 +425,13 @@ const HideScrollbar = forwardRef((prop return () => { window.removeEventListener('resize', windowResizeListener) } - }, [isPreventAnyScroll, isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]) + }, [ + horizontalScrollbarLength, + isPreventAnyScroll, + isPreventHorizontalScroll, + isPreventScroll, + isPreventVerticalScroll + ]) return ( <> @@ -453,7 +474,14 @@ const HideScrollbar = forwardRef((prop {props.children} -