@ehfuse/overlay-scrollbar 1.3.0 → 1.4.1

package/dist/index.js

@@ -293,18 +293,43 @@ const checkElementAndParents = (element, config) => {
     return false;
 };
 
-const OverlayScrollbar = react.forwardRef(({ className = "", style = {}, children, onScroll, scrollContainer: externalScrollContainer, 
+// 기본 설정 객체들을 컴포넌트 외부에 상수로 선언 (재렌더링 시 동일한 참조 유지)
+const DEFAULT_THUMB_CONFIG = {};
+const DEFAULT_TRACK_CONFIG = {};
+const DEFAULT_ARROWS_CONFIG = {};
+const DEFAULT_DRAG_SCROLL_CONFIG = {};
+const DEFAULT_AUTO_HIDE_CONFIG = {};
+const OverlayScrollbar = react.forwardRef(({ className = "", style = {}, children, onScroll, 
 // 그룹화된 설정 객체들
-thumb = {}, track = {}, arrows = {}, dragScroll = {}, 
+thumb = DEFAULT_THUMB_CONFIG, track = DEFAULT_TRACK_CONFIG, arrows = DEFAULT_ARROWS_CONFIG, dragScroll = DEFAULT_DRAG_SCROLL_CONFIG, autoHide = DEFAULT_AUTO_HIDE_CONFIG, 
 // 기타 설정들
-showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
+showScrollbar = true, }, ref) => {
+    // props 변경 추적용 ref
+    const prevPropsRef = react.useRef({});
+    // 렌더링 시 어떤 prop이 변경되었는지 체크
+    react.useEffect(() => {
+        // 현재 props 저장
+        prevPropsRef.current = {
+            children,
+            onScroll,
+            showScrollbar,
+            thumb,
+            track,
+            arrows,
+            dragScroll,
+            autoHide,
+        };
+    });
     const containerRef = react.useRef(null);
     const contentRef = react.useRef(null);
     const scrollbarRef = react.useRef(null);
     const thumbRef = react.useRef(null);
+    // 스크롤 컨테이너 캐싱용 ref (성능 최적화)
+    const cachedScrollContainerRef = react.useRef(null);
     // 기본 상태들
     const [scrollbarVisible, setScrollbarVisible] = react.useState(false);
     const [isDragging, setIsDragging] = react.useState(false);
+    const [isThumbHovered, setIsThumbHovered] = react.useState(false);
     const [dragStart, setDragStart] = react.useState({ y: 0, scrollTop: 0 });
     const [thumbHeight, setThumbHeight] = react.useState(0);
     const [thumbTop, setThumbTop] = react.useState(0);
@@ -327,31 +352,40 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
     const hideTimeoutRef = react.useRef(null);
     // 그룹화된 설정 객체들에 기본값 설정
     const finalThumbConfig = react.useMemo(() => {
-        var _a, _b, _c, _d, _e, _f;
-        return ({
-            width: (_a = thumb.width) !== null && _a !== void 0 ? _a : 8,
-            minHeight: (_b = thumb.minHeight) !== null && _b !== void 0 ? _b : 50,
-            radius: (_c = thumb.radius) !== null && _c !== void 0 ? _c : ((_d = thumb.width) !== null && _d !== void 0 ? _d : 8) / 2,
-            color: (_e = thumb.color) !== null && _e !== void 0 ? _e : "rgba(128, 128, 128, 0.6)",
-            activeColor: (_f = thumb.activeColor) !== null && _f !== void 0 ? _f : "rgba(128, 128, 128, 0.9)",
-        });
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const baseColor = (_a = thumb.color) !== null && _a !== void 0 ? _a : "#606060";
+        return {
+            width: (_b = thumb.width) !== null && _b !== void 0 ? _b : 8,
+            minHeight: (_c = thumb.minHeight) !== null && _c !== void 0 ? _c : 50,
+            radius: (_d = thumb.radius) !== null && _d !== void 0 ? _d : ((_e = thumb.width) !== null && _e !== void 0 ? _e : 8) / 2,
+            color: baseColor,
+            opacity: (_f = thumb.opacity) !== null && _f !== void 0 ? _f : 0.6,
+            hoverColor: (_g = thumb.hoverColor) !== null && _g !== void 0 ? _g : baseColor,
+            hoverOpacity: (_h = thumb.hoverOpacity) !== null && _h !== void 0 ? _h : 1.0,
+        };
     }, [thumb]);
     const finalTrackConfig = react.useMemo(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         return ({
             width: (_a = track.width) !== null && _a !== void 0 ? _a : 16,
             color: (_b = track.color) !== null && _b !== void 0 ? _b : "rgba(128, 128, 128, 0.1)",
             visible: (_c = track.visible) !== null && _c !== void 0 ? _c : true,
+            alignment: (_d = track.alignment) !== null && _d !== void 0 ? _d : "center",
+            radius: (_f = (_e = track.radius) !== null && _e !== void 0 ? _e : finalThumbConfig.radius) !== null && _f !== void 0 ? _f : 4,
+            margin: (_g = track.margin) !== null && _g !== void 0 ? _g : 4,
         });
-    }, [track]);
+    }, [track, finalThumbConfig.radius]);
     const finalArrowsConfig = react.useMemo(() => {
-        var _a, _b, _c, _d;
-        return ({
-            visible: (_a = arrows.visible) !== null && _a !== void 0 ? _a : false,
-            step: (_b = arrows.step) !== null && _b !== void 0 ? _b : 50,
-            color: (_c = arrows.color) !== null && _c !== void 0 ? _c : "rgba(128, 128, 128, 0.8)",
-            activeColor: (_d = arrows.activeColor) !== null && _d !== void 0 ? _d : "rgba(64, 64, 64, 1.0)",
-        });
+        var _a, _b, _c, _d, _e, _f;
+        const baseColor = (_a = arrows.color) !== null && _a !== void 0 ? _a : "#808080";
+        return {
+            visible: (_b = arrows.visible) !== null && _b !== void 0 ? _b : false,
+            step: (_c = arrows.step) !== null && _c !== void 0 ? _c : 50,
+            color: baseColor,
+            opacity: (_d = arrows.opacity) !== null && _d !== void 0 ? _d : 0.6,
+            hoverColor: (_e = arrows.hoverColor) !== null && _e !== void 0 ? _e : baseColor,
+            hoverOpacity: (_f = arrows.hoverOpacity) !== null && _f !== void 0 ? _f : 1.0,
+        };
     }, [arrows]);
     const finalDragScrollConfig = react.useMemo(() => {
         var _a, _b, _c;
@@ -361,6 +395,14 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
             excludeSelectors: (_c = dragScroll.excludeSelectors) !== null && _c !== void 0 ? _c : [],
         });
     }, [dragScroll]);
+    const finalAutoHideConfig = react.useMemo(() => {
+        var _a, _b, _c;
+        return ({
+            enabled: (_a = autoHide.enabled) !== null && _a !== void 0 ? _a : true,
+            delay: (_b = autoHide.delay) !== null && _b !== void 0 ? _b : 1500,
+            delayOnWheel: (_c = autoHide.delayOnWheel) !== null && _c !== void 0 ? _c : 700,
+        });
+    }, [autoHide]);
     // 호환성을 위한 변수들 (자주 사용되는 변수들만 유지)
     const finalThumbWidth = finalThumbConfig.width;
     const finalTrackWidth = finalTrackConfig.width;
@@ -388,32 +430,18 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
             return ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
         },
     }), []);
-    // 실제 스크롤 가능한 요소 찾기
+    // 실제 스크롤 가능한 요소 찾기 (캐싱 최적화)
     const findScrollableElement = react.useCallback(() => {
-        // externalScrollContainer가 있으면 우선 사용
-        if (externalScrollContainer) {
-            console.log("OverlayScrollbar: checking external container", {
-                scrollHeight: externalScrollContainer.scrollHeight,
-                clientHeight: externalScrollContainer.clientHeight,
-            });
-            // virtuoso의 내부 스크롤러를 찾기
-            const virtuosoScroller = externalScrollContainer.querySelector('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller');
-            if (virtuosoScroller) {
-                const element = virtuosoScroller;
-                if (element.scrollHeight > element.clientHeight + 2) {
-                    console.log("OverlayScrollbar: found virtuoso scroller", {
-                        scrollHeight: element.scrollHeight,
-                        clientHeight: element.clientHeight,
-                        element,
-                    });
-                    return element;
-                }
-            }
-            // externalScrollContainer 자체가 스크롤 가능한지 확인
-            if (externalScrollContainer.scrollHeight >
-                externalScrollContainer.clientHeight + 2) {
-                return externalScrollContainer;
+        // 캐시된 요소가 여전히 유효한지 확인
+        if (cachedScrollContainerRef.current) {
+            const cached = cachedScrollContainerRef.current;
+            // DOM에 연결되어 있고 여전히 스크롤 가능한지 확인
+            if (document.contains(cached) &&
+                cached.scrollHeight > cached.clientHeight + 2) {
+                return cached;
             }
+            // 캐시 무효화
+            cachedScrollContainerRef.current = null;
         }
         if (!containerRef.current) {
             return null;
@@ -422,6 +450,7 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
         if (contentRef.current &&
             contentRef.current.scrollHeight >
                 containerRef.current.clientHeight + 2) {
+            cachedScrollContainerRef.current = containerRef.current;
             return containerRef.current;
         }
         // children 요소에서 스크롤 가능한 요소 찾기
@@ -429,16 +458,12 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
         for (const child of childScrollableElements) {
             const element = child;
             if (element.scrollHeight > element.clientHeight + 2) {
-                console.log("OverlayScrollbar: found scrollable child element", {
-                    scrollHeight: element.scrollHeight,
-                    clientHeight: element.clientHeight,
-                    element,
-                });
+                cachedScrollContainerRef.current = element;
                 return element;
             }
         }
         return null;
-    }, [externalScrollContainer]);
+    }, []);
     // 스크롤 가능 여부 체크
     const isScrollable = react.useCallback(() => {
         return findScrollableElement() !== null;
@@ -452,12 +477,16 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
     }, []);
     // 스크롤바 숨기기 타이머
     const setHideTimer = react.useCallback((delay) => {
+        // 자동 숨김이 비활성화되어 있으면 타이머를 설정하지 않음
+        if (!finalAutoHideConfig.enabled) {
+            return;
+        }
         clearHideTimer();
         hideTimeoutRef.current = setTimeout(() => {
             setScrollbarVisible(false);
             hideTimeoutRef.current = null;
         }, delay);
-    }, [clearHideTimer, isDragging]);
+    }, [clearHideTimer, finalAutoHideConfig.enabled]);
     // 스크롤바 위치 및 크기 업데이트
     const updateScrollbar = react.useCallback(() => {
         if (!scrollbarRef.current)
@@ -469,17 +498,18 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
             clearHideTimer();
             return;
         }
+        // 자동 숨김이 비활성화되어 있으면 스크롤바를 항상 표시
+        if (!finalAutoHideConfig.enabled) {
+            setScrollbarVisible(true);
+            clearHideTimer();
+        }
         const containerHeight = scrollableElement.clientHeight;
         const contentHeight = scrollableElement.scrollHeight;
         const scrollTop = scrollableElement.scrollTop;
-        console.log("OverlayScrollbar: updating scrollbar", {
-            containerHeight,
-            contentHeight,
-            scrollTop,
-            element: scrollableElement,
-        });
-        // 화살표와 간격 공간 계산 (화살표 + 위아래여백 4px + 화살표간격 4px씩, 화살표 없어도 위아래 4px씩 여백)
-        const arrowSpace = showArrows ? finalThumbWidth * 2 + 16 : 8;
+        // 화살표와 간격 공간 계산 (화살표 + 위아래 마진, 화살표 없어도 위아래 마진)
+        const arrowSpace = showArrows
+            ? finalThumbWidth * 2 + finalTrackConfig.margin * 4
+            : finalTrackConfig.margin * 2;
         // 썸 높이 계산 (사용자 설정 최소 높이 사용, 화살표 공간 제외)
         const availableHeight = containerHeight - arrowSpace;
         const scrollRatio = containerHeight / contentHeight;
@@ -498,6 +528,7 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
         showArrows,
         finalThumbWidth,
         thumbMinHeight,
+        finalAutoHideConfig.enabled,
     ]);
     // 썸 드래그 시작
     const handleThumbMouseDown = react.useCallback((event) => {
@@ -506,7 +537,6 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
         event.stopPropagation();
         const actualScrollContainer = findScrollableElement();
         if (!actualScrollContainer) {
-            console.log("Thumb drag - no scrollable element found");
             return;
         }
         setIsDragging(true);
@@ -525,7 +555,6 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
             return;
         const actualScrollContainer = findScrollableElement();
         if (!actualScrollContainer) {
-            console.log("Mouse move - no scrollable element found");
             return;
         }
         const containerHeight = actualScrollContainer.clientHeight;
@@ -548,15 +577,13 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
     const handleMouseUp = react.useCallback(() => {
         setIsDragging(false);
         if (isScrollable()) {
-            setHideTimer(hideDelay); // 기본 숨김 시간 적용
+            setHideTimer(finalAutoHideConfig.delay); // 기본 숨김 시간 적용
         }
-    }, [isScrollable, setHideTimer, hideDelay]);
+    }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);
     // 트랙 클릭으로 스크롤 점프
     const handleTrackClick = react.useCallback((event) => {
         var _a;
-        console.log("handleTrackClick called", event);
         if (!scrollbarRef.current) {
-            console.log("Track click - scrollbarRef not available");
             return;
         }
         const scrollbar = scrollbarRef.current;
@@ -564,29 +591,24 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
         const clickY = event.clientY - rect.top;
         const actualScrollContainer = findScrollableElement();
         if (!actualScrollContainer) {
-            console.log("Track click - no scrollable element found");
             return;
         }
-        console.log("Track click - using scrollable element", actualScrollContainer);
         const containerHeight = actualScrollContainer.clientHeight;
         const contentHeight = actualScrollContainer.scrollHeight;
         const scrollRatio = clickY / containerHeight;
         const newScrollTop = scrollRatio * (contentHeight - containerHeight);
-        console.log("Track click scroll calculation", {
-            clickY,
-            containerHeight,
-            contentHeight,
-            scrollRatio,
-            newScrollTop,
-            actualScrollContainer,
-        });
         actualScrollContainer.scrollTop = Math.max(0, Math.min(contentHeight - containerHeight, newScrollTop));
         updateScrollbar();
         setScrollbarVisible(true);
-        setHideTimer(hideDelay);
+        setHideTimer(finalAutoHideConfig.delay);
         // 포커스 유지 (키보드 입력이 계속 작동하도록)
         (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [updateScrollbar, setHideTimer, hideDelay, findScrollableElement]);
+    }, [
+        updateScrollbar,
+        setHideTimer,
+        finalAutoHideConfig.delay,
+        findScrollableElement,
+    ]);
     // 위쪽 화살표 클릭 핸들러
     const handleUpArrowClick = react.useCallback((event) => {
         var _a;
@@ -598,10 +620,15 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
         containerRef.current.scrollTop = newScrollTop;
         updateScrollbar();
         setScrollbarVisible(true);
-        setHideTimer(hideDelay);
+        setHideTimer(finalAutoHideConfig.delay);
         // 포커스 유지 (키보드 입력이 계속 작동하도록)
         (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [updateScrollbar, setHideTimer, arrowStep, hideDelay]);
+    }, [
+        updateScrollbar,
+        setHideTimer,
+        arrowStep,
+        finalAutoHideConfig.delay,
+    ]);
     // 아래쪽 화살표 클릭 핸들러
     const handleDownArrowClick = react.useCallback((event) => {
         var _a;
@@ -616,10 +643,15 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
         container.scrollTop = newScrollTop;
         updateScrollbar();
         setScrollbarVisible(true);
-        setHideTimer(hideDelay);
+        setHideTimer(finalAutoHideConfig.delay);
         // 포커스 유지 (키보드 입력이 계속 작동하도록)
         (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [updateScrollbar, setHideTimer, arrowStep, hideDelay]);
+    }, [
+        updateScrollbar,
+        setHideTimer,
+        arrowStep,
+        finalAutoHideConfig.delay,
+    ]);
     // 드래그 스크롤 시작
     const handleDragScrollStart = react.useCallback((event) => {
         // 드래그 스크롤이 비활성화된 경우
@@ -681,9 +713,9 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
     const handleDragScrollEnd = react.useCallback(() => {
         setIsDragScrolling(false);
         if (isScrollable()) {
-            setHideTimer(hideDelay);
+            setHideTimer(finalAutoHideConfig.delay);
         }
-    }, [isScrollable, setHideTimer, hideDelay]);
+    }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);
     // 스크롤 이벤트 리스너 (externalScrollContainer 우선 사용)
     react.useEffect(() => {
         const handleScroll = (event) => {
@@ -692,7 +724,9 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
             clearHideTimer();
             setScrollbarVisible(true);
             // 휠 스크롤 중이면 빠른 숨김, 아니면 기본 숨김 시간 적용
-            const delay = isWheelScrolling ? hideDelayOnWheel : hideDelay;
+            const delay = isWheelScrolling
+                ? finalAutoHideConfig.delayOnWheel
+                : finalAutoHideConfig.delay;
             setHideTimer(delay);
             if (onScroll) {
                 onScroll(event);
@@ -717,7 +751,6 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
         const scrollableElement = findScrollableElement();
         if (scrollableElement) {
             elementsToWatch.push(scrollableElement);
-            console.log("OverlayScrollbar: watching scrollable element for events", scrollableElement);
         }
         // fallback: 내부 컨테이너와 children 요소도 감지
         const container = containerRef.current;
@@ -754,10 +787,84 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
         onScroll,
         clearHideTimer,
         setHideTimer,
-        hideDelay,
-        hideDelayOnWheel,
+        finalAutoHideConfig,
         isWheelScrolling,
     ]);
+    // 키보드 네비게이션 핸들러 (방향키, PageUp/PageDown/Home/End)
+    react.useEffect(() => {
+        const handleKeyDown = (event) => {
+            const scrollableElement = findScrollableElement();
+            if (!scrollableElement)
+                return;
+            const { key } = event;
+            const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
+            const maxScrollTop = scrollHeight - clientHeight;
+            // 한 줄 스크롤 단위 (rowHeight 또는 기본값)
+            const lineScrollStep = 50;
+            let newScrollTop = null;
+            switch (key) {
+                case "ArrowUp":
+                    event.preventDefault();
+                    newScrollTop = Math.max(0, scrollTop - lineScrollStep);
+                    break;
+                case "ArrowDown":
+                    event.preventDefault();
+                    newScrollTop = Math.min(maxScrollTop, scrollTop + lineScrollStep);
+                    break;
+                case "PageUp":
+                    event.preventDefault();
+                    newScrollTop = Math.max(0, scrollTop - clientHeight);
+                    break;
+                case "PageDown":
+                    event.preventDefault();
+                    newScrollTop = Math.min(maxScrollTop, scrollTop + clientHeight);
+                    break;
+                case "Home":
+                    event.preventDefault();
+                    newScrollTop = 0;
+                    break;
+                case "End":
+                    event.preventDefault();
+                    newScrollTop = maxScrollTop;
+                    break;
+                default:
+                    return;
+            }
+            if (newScrollTop !== null) {
+                // 썸 위치를 먼저 업데이트
+                const scrollRatio = newScrollTop / maxScrollTop;
+                const arrowSpace = showArrows
+                    ? finalThumbWidth * 2 + finalTrackConfig.margin * 4
+                    : finalTrackConfig.margin * 2;
+                const availableHeight = clientHeight - arrowSpace;
+                const scrollableThumbHeight = availableHeight - thumbHeight;
+                const newThumbTop = scrollableThumbHeight * scrollRatio;
+                setThumbTop(newThumbTop);
+                // 스크롤 위치를 즉시 변경 (애니메이션 없음)
+                scrollableElement.scrollTop = newScrollTop;
+                // 스크롤바 표시
+                clearHideTimer();
+                setScrollbarVisible(true);
+                setHideTimer(finalAutoHideConfig.delay);
+            }
+        };
+        const container = containerRef.current;
+        if (container) {
+            container.addEventListener("keydown", handleKeyDown);
+            return () => {
+                container.removeEventListener("keydown", handleKeyDown);
+            };
+        }
+    }, [
+        findScrollableElement,
+        showArrows,
+        finalThumbWidth,
+        finalTrackConfig.margin,
+        thumbHeight,
+        clearHideTimer,
+        setHideTimer,
+        finalAutoHideConfig.delay,
+    ]);
     // 드래그 스크롤 전역 마우스 이벤트 리스너
     react.useEffect(() => {
         if (isDragScrolling) {
@@ -790,53 +897,65 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
         }, 100);
         return () => clearTimeout(timer);
     }, [updateScrollbar]);
-    // externalScrollContainer가 변경될 때 스크롤바 업데이트
-    react.useEffect(() => {
-        if (externalScrollContainer) {
-            // externalScrollContainer가 설정된 후 스크롤바 업데이트
-            const timer = setTimeout(() => {
-                updateScrollbar();
-            }, 50);
-            return () => clearTimeout(timer);
-        }
-    }, [externalScrollContainer, updateScrollbar]);
     // 컴포넌트 초기화 완료 표시 (hover 이벤트 활성화용)
     react.useEffect(() => {
         const timer = setTimeout(() => {
             setIsInitialized(true);
-            console.log("OverlayScrollbar initialized", {
-                containerRef: !!containerRef.current,
-                contentRef: !!contentRef.current,
-                isScrollable: isScrollable(),
-            });
             // 초기화 후 스크롤바 업데이트 (썸 높이 정확하게 계산)
             updateScrollbar();
+            // 자동 숨김이 비활성화되어 있으면 스크롤바를 항상 표시
+            if (!finalAutoHideConfig.enabled && isScrollable()) {
+                setScrollbarVisible(true);
+            }
+            // 스크롤 컨테이너에 자동 포커스 (키보드 네비게이션 활성화)
+            if (containerRef.current) {
+                containerRef.current.focus();
+            }
         }, 100);
         return () => clearTimeout(timer);
-    }, [isScrollable]);
+    }, [isScrollable, updateScrollbar, finalAutoHideConfig.enabled]);
     // Resize observer로 크기 변경 감지
     react.useEffect(() => {
         const resizeObserver = new ResizeObserver(() => {
             updateScrollbar();
         });
         const elementsToObserve = [];
-        // externalScrollContainer가 있으면 우선 관찰
-        if (externalScrollContainer) {
-            elementsToObserve.push(externalScrollContainer);
-        }
-        // 내부 컨테이너들도 관찰
+        // 내부 컨테이너들 관찰
         if (containerRef.current) {
             elementsToObserve.push(containerRef.current);
         }
         if (contentRef.current) {
             elementsToObserve.push(contentRef.current);
         }
+        // 캐시된 스크롤 컨테이너도 관찰
+        if (cachedScrollContainerRef.current &&
+            document.contains(cachedScrollContainerRef.current)) {
+            elementsToObserve.push(cachedScrollContainerRef.current);
+        }
         // 모든 요소들 관찰 시작
         elementsToObserve.forEach((element) => {
             resizeObserver.observe(element);
         });
         return () => resizeObserver.disconnect();
-    }, [updateScrollbar, externalScrollContainer]);
+    }, [updateScrollbar]);
+    // MutationObserver로 DOM 변경 감지
+    react.useEffect(() => {
+        if (!containerRef.current) {
+            return;
+        }
+        const observer = new MutationObserver(() => {
+            // 캐시 초기화하여 새로운 스크롤 컨테이너 감지
+            cachedScrollContainerRef.current = null;
+            updateScrollbar();
+        });
+        observer.observe(containerRef.current, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["style"],
+        });
+        return () => observer.disconnect();
+    }, [updateScrollbar]);
     // trackWidth가 thumbWidth보다 작으면 thumbWidth와 같게 설정
     const adjustedTrackWidth = Math.max(finalTrackWidth, finalThumbWidth);
     // 웹킷 스크롤바 숨기기용 CSS 동적 주입
@@ -896,16 +1015,11 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
                         display: "flex", // flex 컨테이너로 설정
                         flexDirection: "column", // 세로 방향 정렬
                     }, children: children }) }), showScrollbar && (jsxRuntime.jsxs("div", { ref: scrollbarRef, className: "overlay-scrollbar-track", onMouseEnter: () => {
-                    console.log("Track hover enter", {
-                        isScrollable: isScrollable(),
-                        scrollbarVisible,
-                    });
                     clearHideTimer();
                     setScrollbarVisible(true);
                 }, onMouseLeave: () => {
-                    console.log("Track hover leave", { isDragging });
                     if (!isDragging) {
-                        setHideTimer(hideDelay);
+                        setHideTimer(finalAutoHideConfig.delay);
                     }
                 }, style: {
                     position: "absolute",
@@ -919,44 +1033,58 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
                     zIndex: 1000,
                     pointerEvents: "auto",
                 }, children: [finalTrackConfig.visible && (jsxRuntime.jsx("div", { className: "overlay-scrollbar-track-background", onClick: (e) => {
-                            console.log("Track background clicked", e);
                             e.preventDefault();
                             e.stopPropagation();
                             handleTrackClick(e);
                         }, style: {
                             position: "absolute",
                             top: showArrows
-                                ? `${finalThumbConfig.width + 8}px`
-                                : "4px",
-                            right: `${(adjustedTrackWidth -
-                                finalThumbConfig.width) /
-                                2}px`, // 트랙 가운데 정렬
+                                ? `${finalThumbConfig.width +
+                                    finalTrackConfig.margin * 2}px`
+                                : `${finalTrackConfig.margin}px`,
+                            right: finalTrackConfig.alignment === "right"
+                                ? "0px"
+                                : `${(adjustedTrackWidth -
+                                    finalThumbConfig.width) /
+                                    2}px`, // 트랙 정렬
                             width: `${finalThumbConfig.width}px`,
                             height: showArrows
-                                ? `calc(100% - ${finalThumbConfig.width * 2 + 16}px)`
-                                : "calc(100% - 8px)",
+                                ? `calc(100% - ${finalThumbConfig.width * 2 +
+                                    finalTrackConfig.margin * 4}px)`
+                                : `calc(100% - ${finalTrackConfig.margin * 2}px)`,
                             backgroundColor: finalTrackConfig.color,
-                            borderRadius: `${finalThumbConfig.radius}px`,
+                            borderRadius: `${finalTrackConfig.radius}px`,
                             cursor: "pointer",
-                        } })), jsxRuntime.jsx("div", { ref: thumbRef, className: "overlay-scrollbar-thumb", onMouseDown: handleThumbMouseDown, style: {
+                        } })), jsxRuntime.jsx("div", { ref: thumbRef, className: "overlay-scrollbar-thumb", onMouseDown: handleThumbMouseDown, onMouseEnter: () => setIsThumbHovered(true), onMouseLeave: () => setIsThumbHovered(false), style: {
                             position: "absolute",
-                            top: `${(showArrows ? finalThumbWidth + 8 : 4) +
-                                thumbTop}px`,
-                            right: `${(adjustedTrackWidth - finalThumbWidth) / 2}px`, // 트랙 가운데 정렬
+                            top: `${(showArrows
+                                ? finalThumbWidth +
+                                    finalTrackConfig.margin * 2
+                                : finalTrackConfig.margin) + thumbTop}px`,
+                            right: finalTrackConfig.alignment === "right"
+                                ? "0px"
+                                : `${(adjustedTrackWidth -
+                                    finalThumbWidth) /
+                                    2}px`, // 트랙 정렬
                             width: `${finalThumbWidth}px`,
                             height: `${Math.max(thumbHeight, thumbMinHeight)}px`,
-                            backgroundColor: isDragging
-                                ? finalThumbConfig.activeColor
+                            backgroundColor: isThumbHovered || isDragging
+                                ? finalThumbConfig.hoverColor
                                 : finalThumbConfig.color,
+                            opacity: isThumbHovered || isDragging
+                                ? finalThumbConfig.hoverOpacity
+                                : finalThumbConfig.opacity,
                             borderRadius: `${finalThumbConfig.radius}px`,
                             cursor: "pointer",
-                            transition: isDragging
-                                ? "none"
-                                : "background-color 0.2s ease-in-out",
+                            transition: "background-color 0.2s ease-in-out, opacity 0.2s ease-in-out",
                         } })] })), showScrollbar && showArrows && (jsxRuntime.jsx("div", { className: "overlay-scrollbar-up-arrow", onClick: handleUpArrowClick, onMouseEnter: () => setHoveredArrow("up"), onMouseLeave: () => setHoveredArrow(null), style: {
                     position: "absolute",
-                    top: "4px",
-                    right: `${(adjustedTrackWidth - finalThumbWidth) / 2}px`, // 트랙 가운데 정렬
+                    top: `${finalTrackConfig.margin}px`,
+                    right: finalTrackConfig.alignment === "right"
+                        ? "0px"
+                        : `${(adjustedTrackWidth -
+                            finalThumbWidth) /
+                            2}px`, // 트랙 정렬
                     width: `${finalThumbWidth}px`,
                     height: `${finalThumbWidth}px`,
                     cursor: "pointer",
@@ -965,16 +1093,24 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
                     justifyContent: "center",
                     fontSize: `${Math.max(finalThumbWidth * 0.75, 8)}px`,
                     color: hoveredArrow === "up"
-                        ? finalArrowsConfig.activeColor
+                        ? finalArrowsConfig.hoverColor
                         : finalArrowsConfig.color,
                     userSelect: "none",
                     zIndex: 1001,
-                    opacity: scrollbarVisible ? 1 : 0,
+                    opacity: scrollbarVisible
+                        ? hoveredArrow === "up"
+                            ? finalArrowsConfig.hoverOpacity
+                            : finalArrowsConfig.opacity
+                        : 0,
                     transition: "opacity 0.2s ease-in-out, color 0.15s ease-in-out",
                 }, children: "\u25B2" })), showScrollbar && showArrows && (jsxRuntime.jsx("div", { className: "overlay-scrollbar-down-arrow", onClick: handleDownArrowClick, onMouseEnter: () => setHoveredArrow("down"), onMouseLeave: () => setHoveredArrow(null), style: {
                     position: "absolute",
-                    bottom: "4px",
-                    right: `${(adjustedTrackWidth - finalThumbWidth) / 2}px`, // 트랙 가운데 정렬
+                    bottom: `${finalTrackConfig.margin}px`,
+                    right: finalTrackConfig.alignment === "right"
+                        ? "0px"
+                        : `${(adjustedTrackWidth -
+                            finalThumbWidth) /
+                            2}px`, // 트랙 정렬
                     width: `${finalThumbWidth}px`,
                     height: `${finalThumbWidth}px`,
                     cursor: "pointer",
@@ -983,11 +1119,15 @@ showScrollbar = true, hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
                     justifyContent: "center",
                     fontSize: `${Math.max(finalThumbWidth * 0.75, 8)}px`,
                     color: hoveredArrow === "down"
-                        ? finalArrowsConfig.activeColor
+                        ? finalArrowsConfig.hoverColor
                         : finalArrowsConfig.color,
                     userSelect: "none",
                     zIndex: 1001,
-                    opacity: scrollbarVisible ? 1 : 0,
+                    opacity: scrollbarVisible
+                        ? hoveredArrow === "down"
+                            ? finalArrowsConfig.hoverOpacity
+                            : finalArrowsConfig.opacity
+                        : 0,
                     transition: "opacity 0.2s ease-in-out, color 0.15s ease-in-out",
                 }, children: "\u25BC" }))] }));
 });