@ehfuse/overlay-scrollbar 1.2.6 → 1.4.0

package/dist/index.esm.js

@@ -1,8 +1,299 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useImperativeHandle, useCallback, useEffect, useMemo } from 'react';
+import { forwardRef, useRef, useState, useMemo, useImperativeHandle, useCallback, useEffect } from 'react';
 
-const OverlayScrollbar = forwardRef(({ className = "", style = {}, children, onScroll, scrollbarWidth = 8, // deprecated
-thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidth = 16, thumbWidth = 8, thumbMinHeight = 50, trackColor = "rgba(128, 128, 128, 0.1)", thumbColor = "rgba(128, 128, 128, 0.6)", thumbActiveColor = "rgba(128, 128, 128, 0.9)", arrowColor = "rgba(128, 128, 128, 0.6)", arrowActiveColor = "rgba(64, 64, 64, 1.0)", hideDelay = 1500, hideDelayOnWheel = 700, }, ref) => {
+/**
+ * MIT License
+ *
+ * Copyright (c) 2025 KIM YOUNG JIN (ehfuse@gmail.com)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// 드래그 스크롤을 제외할 클래스들 (자신 또는 부모 요소에서 확인)
+const DEFAULT_EXCLUDE_CLASSES = [
+    // 기본 입력 요소들
+    "editor",
+    "textarea",
+    "input",
+    "select",
+    "textfield",
+    "form-control",
+    "contenteditable",
+    // Material-UI 컴포넌트들
+    "MuiInputBase-input",
+    "MuiSelect-select",
+    "MuiOutlinedInput-input",
+    "MuiFilledInput-input",
+    "MuiInput-input",
+    "MuiFormControl-root",
+    "MuiTextField-root",
+    "MuiSelect-root",
+    "MuiOutlinedInput-root",
+    "MuiFilledInput-root",
+    "MuiInput-root",
+    "MuiAutocomplete-input",
+    "MuiDatePicker-input",
+    "MuiSlider-thumb",
+    "MuiSlider-rail",
+    "MuiSlider-track",
+    "MuiSlider-mark",
+    "MuiSlider-markLabel",
+    "MuiSlider-root",
+    "MuiSlider-colorPrimary",
+    "MuiSlider-sizeMedium",
+    "MuiIconButton-root",
+    "MuiButton-root",
+    "MuiButtonBase-root",
+    "MuiTouchRipple-root",
+    "MuiCheckbox-root",
+    "MuiRadio-root",
+    "MuiSwitch-root",
+    "PrivateSwitchBase-root",
+    // Ant Design 컴포넌트들
+    "ant-input",
+    "ant-input-affix-wrapper",
+    "ant-input-group-addon",
+    "ant-input-number",
+    "ant-input-number-handler",
+    "ant-select",
+    "ant-select-selector",
+    "ant-select-selection-search",
+    "ant-select-dropdown",
+    "ant-cascader",
+    "ant-cascader-input",
+    "ant-picker",
+    "ant-picker-input",
+    "ant-time-picker",
+    "ant-calendar-picker",
+    "ant-slider",
+    "ant-slider-track",
+    "ant-slider-handle",
+    "ant-switch",
+    "ant-checkbox",
+    "ant-checkbox-wrapper",
+    "ant-radio",
+    "ant-radio-wrapper",
+    "ant-rate",
+    "ant-upload",
+    "ant-upload-drag",
+    "ant-form-item",
+    "ant-form-item-control",
+    "ant-btn",
+    "ant-dropdown",
+    "ant-dropdown-trigger",
+    "ant-menu",
+    "ant-menu-item",
+    "ant-tooltip",
+    "ant-popover",
+    "ant-modal",
+    "ant-drawer",
+    "ant-tree-select",
+    "ant-auto-complete",
+    "ant-mentions",
+    "ant-transfer",
+    // Shadcn/ui 컴포넌트들
+    "ui-input",
+    "ui-textarea",
+    "ui-select",
+    "ui-select-trigger",
+    "ui-select-content",
+    "ui-select-item",
+    "ui-button",
+    "ui-checkbox",
+    "ui-radio-group",
+    "ui-switch",
+    "ui-slider",
+    "ui-range-slider",
+    "ui-calendar",
+    "ui-date-picker",
+    "ui-combobox",
+    "ui-command",
+    "ui-command-input",
+    "ui-popover",
+    "ui-dialog",
+    "ui-sheet",
+    "ui-dropdown-menu",
+    "ui-context-menu",
+    "ui-menubar",
+    "ui-navigation-menu",
+    "ui-form",
+    "ui-form-control",
+    "ui-form-item",
+    "ui-form-field",
+    "ui-label",
+    // Radix UI 기본 클래스들 (Shadcn 기반)
+    "radix-ui",
+    "radix-select",
+    "radix-dropdown",
+    "radix-dialog",
+    "radix-popover",
+    "radix-accordion",
+    "radix-tabs",
+    "radix-slider",
+    "radix-switch",
+    "radix-checkbox",
+    "radix-radio",
+    // Quill Editor
+    "ql-editor",
+    "ql-container",
+    "ql-toolbar",
+    "ql-picker",
+    "ql-picker-label",
+    "ql-picker-options",
+    "ql-formats",
+    "ql-snow",
+    "ql-bubble",
+    "quill",
+    "quilleditor",
+    // Monaco Editor
+    "monaco-editor",
+    "monaco-editor-background",
+    "view-lines",
+    "decorationsOverviewRuler",
+    "monaco-scrollable-element",
+    // CodeMirror
+    "CodeMirror",
+    "CodeMirror-code",
+    "CodeMirror-lines",
+    "CodeMirror-scroll",
+    "CodeMirror-sizer",
+    "cm-editor",
+    "cm-focused",
+    "cm-content",
+    // TinyMCE
+    "tox-editor-container",
+    "tox-editor-header",
+    "tox-edit-area",
+    "tox-tinymce",
+    "mce-content-body",
+    // CKEditor
+    "ck-editor",
+    "ck-content",
+    "ck-toolbar",
+    "ck-editor__editable",
+    "ck-widget",
+    // Slate.js
+    "slate-editor",
+    "slate-content",
+    // Draft.js
+    "DraftEditor-root",
+    "DraftEditor-editorContainer",
+    "public-DraftEditor-content",
+    // EhfuseEditor
+    "ehfuse-editor",
+    "ehfuse-editor-wrapper",
+    "ehfuse-editor-content",
+    "ehfuse-toolbar",
+    "ehfuse-toolbar-group",
+    "ehfuse-cursor",
+    // 기타 에디터들
+    "text-editor",
+    "rich-text-editor",
+    "wysiwyg",
+    "ace_editor",
+    "ace_content",
+];
+/**
+ * 드래그 스크롤이 허용되지 않는 요소들인지 확인
+ */
+/**
+ * 드래그 스크롤이 허용되지 않는 요소들인지 확인
+ */
+const isTextInputElement = (element, config) => {
+    const tagName = element.tagName.toLowerCase();
+    const inputTypes = [
+        "text",
+        "password",
+        "email",
+        "number",
+        "search",
+        "tel",
+        "url",
+        "checkbox",
+        "radio",
+    ];
+    // input 태그이면서 텍스트 입력 타입이나 체크박스/라디오인 경우
+    if (tagName === "input") {
+        const type = element.type;
+        return inputTypes.includes(type);
+    }
+    // textarea, select, 편집 가능한 요소들
+    if (["textarea", "select", "button"].includes(tagName)) {
+        return true;
+    }
+    // SVG 요소들 (아이콘들)
+    if ([
+        "svg",
+        "path",
+        "circle",
+        "rect",
+        "line",
+        "polygon",
+        "polyline",
+    ].includes(tagName)) {
+        return true;
+    }
+    // contenteditable 속성이 있는 요소
+    if (element.getAttribute("contenteditable") === "true") {
+        return true;
+    }
+    // 추가 셀렉터 체크
+    if (config === null || config === void 0 ? void 0 : config.excludeSelectors) {
+        for (const selector of config.excludeSelectors) {
+            if (element.matches(selector)) {
+                return true;
+            }
+        }
+    }
+    return checkElementAndParents(element, config);
+};
+/**
+ * 자신 또는 부모 요소들을 확인하여 드래그 스크롤을 제외할 요소인지 판단
+ */
+const checkElementAndParents = (element, config) => {
+    // 모든 제외 클래스들 합치기 (기본 클래스 + 사용자 추가 클래스)
+    const allExcludeClasses = [
+        ...DEFAULT_EXCLUDE_CLASSES,
+        ...((config === null || config === void 0 ? void 0 : config.excludeClasses) || []),
+    ];
+    let currentElement = element;
+    let depth = 0;
+    const maxDepth = 5; // 최대 5단계까지 부모 요소 확인
+    while (currentElement && depth <= maxDepth) {
+        // 현재 요소가 제외 클래스를 가지고 있는지 확인
+        if (allExcludeClasses.some((cls) => currentElement.classList.contains(cls))) {
+            return true;
+        }
+        // 다이얼로그 루트에 도달하면 중단
+        if (currentElement.classList.contains("MuiDialogContent-root")) {
+            break;
+        }
+        currentElement = currentElement.parentElement;
+        depth++;
+    }
+    return false;
+};
+
+const OverlayScrollbar = forwardRef(({ className = "", style = {}, children, onScroll, scrollContainer: externalScrollContainer, 
+// 그룹화된 설정 객체들
+thumb = {}, track = {}, arrows = {}, dragScroll = {}, autoHide = {}, 
+// 기타 설정들
+showScrollbar = true, }, ref) => {
     const containerRef = useRef(null);
     const contentRef = useRef(null);
     const scrollbarRef = useRef(null);
@@ -10,9 +301,18 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
     // 기본 상태들
     const [scrollbarVisible, setScrollbarVisible] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
+    const [isThumbHovered, setIsThumbHovered] = useState(false);
     const [dragStart, setDragStart] = useState({ y: 0, scrollTop: 0 });
     const [thumbHeight, setThumbHeight] = useState(0);
     const [thumbTop, setThumbTop] = useState(0);
+    // 드래그 스크롤 상태
+    const [isDragScrolling, setIsDragScrolling] = useState(false);
+    const [dragScrollStart, setDragScrollStart] = useState({
+        x: 0,
+        y: 0,
+        scrollTop: 0,
+        scrollLeft: 0,
+    });
     const [activeArrow, setActiveArrow] = useState(null);
     const [hoveredArrow, setHoveredArrow] = useState(null);
     // 초기 마운트 시 hover 방지용
@@ -22,6 +322,65 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
     const [isWheelScrolling, setIsWheelScrolling] = useState(false);
     // 숨김 타이머
     const hideTimeoutRef = useRef(null);
+    // 그룹화된 설정 객체들에 기본값 설정
+    const finalThumbConfig = useMemo(() => {
+        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 = useMemo(() => {
+        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, finalThumbConfig.radius]);
+    const finalArrowsConfig = useMemo(() => {
+        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 = useMemo(() => {
+        var _a, _b, _c;
+        return ({
+            enabled: (_a = dragScroll.enabled) !== null && _a !== void 0 ? _a : true,
+            excludeClasses: (_b = dragScroll.excludeClasses) !== null && _b !== void 0 ? _b : [],
+            excludeSelectors: (_c = dragScroll.excludeSelectors) !== null && _c !== void 0 ? _c : [],
+        });
+    }, [dragScroll]);
+    const finalAutoHideConfig = 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;
+    const thumbMinHeight = finalThumbConfig.minHeight;
+    const showArrows = finalArrowsConfig.visible;
+    const arrowStep = finalArrowsConfig.step;
     // ref를 통해 외부에서 스크롤 컨테이너에 접근할 수 있도록 함
     useImperativeHandle(ref, () => ({
         getScrollContainer: () => containerRef.current,
@@ -43,13 +402,61 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
             return ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
         },
     }), []);
+    // 실제 스크롤 가능한 요소 찾기
+    const findScrollableElement = 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 (!containerRef.current) {
+            return null;
+        }
+        // 내부 컨테이너의 스크롤 가능 여부 확인
+        if (contentRef.current &&
+            contentRef.current.scrollHeight >
+                containerRef.current.clientHeight + 2) {
+            return containerRef.current;
+        }
+        // children 요소에서 스크롤 가능한 요소 찾기
+        const childScrollableElements = containerRef.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');
+        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,
+                });
+                return element;
+            }
+        }
+        return null;
+    }, [externalScrollContainer]);
     // 스크롤 가능 여부 체크
     const isScrollable = useCallback(() => {
-        if (!containerRef.current || !contentRef.current)
-            return false;
-        return (contentRef.current.scrollHeight >
-            containerRef.current.clientHeight + 2);
-    }, []);
+        return findScrollableElement() !== null;
+    }, [findScrollableElement]);
     // 타이머 정리
     const clearHideTimer = useCallback(() => {
         if (hideTimeoutRef.current) {
@@ -59,31 +466,45 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
     }, []);
     // 스크롤바 숨기기 타이머
     const setHideTimer = useCallback((delay) => {
+        // 자동 숨김이 비활성화되어 있으면 타이머를 설정하지 않음
+        if (!finalAutoHideConfig.enabled) {
+            return;
+        }
         clearHideTimer();
         hideTimeoutRef.current = setTimeout(() => {
             setScrollbarVisible(false);
             hideTimeoutRef.current = null;
         }, delay);
-    }, [clearHideTimer, isDragging]);
+    }, [clearHideTimer, finalAutoHideConfig.enabled]);
     // 스크롤바 위치 및 크기 업데이트
     const updateScrollbar = useCallback(() => {
-        if (!containerRef.current ||
-            !contentRef.current ||
-            !scrollbarRef.current)
+        if (!scrollbarRef.current)
             return;
-        const container = containerRef.current;
-        const content = contentRef.current;
-        const containerHeight = container.clientHeight;
-        const contentHeight = content.scrollHeight;
-        const scrollTop = container.scrollTop;
-        // 스크롤 불가능하면 숨김
-        if (contentHeight <= containerHeight + 2) {
+        const scrollableElement = findScrollableElement();
+        if (!scrollableElement) {
+            // 스크롤 불가능하면 숨김
             setScrollbarVisible(false);
             clearHideTimer();
             return;
         }
-        // 화살표와 간격 공간 계산 (화살표 + 위아래여백 4px + 화살표간격 4px씩, 화살표 없어도 위아래 4px씩 여백)
-        const arrowSpace = showArrows ? scrollbarWidth * 2 + 16 : 8;
+        // 자동 숨김이 비활성화되어 있으면 스크롤바를 항상 표시
+        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,
+        });
+        // 화살표와 간격 공간 계산 (화살표 + 위아래 마진, 화살표 없어도 위아래 마진)
+        const arrowSpace = showArrows
+            ? finalThumbWidth * 2 + finalTrackConfig.margin * 4
+            : finalTrackConfig.margin * 2;
         // 썸 높이 계산 (사용자 설정 최소 높이 사용, 화살표 공간 제외)
         const availableHeight = containerHeight - arrowSpace;
         const scrollRatio = containerHeight / contentHeight;
@@ -96,66 +517,110 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
             : 0;
         setThumbHeight(calculatedThumbHeight);
         setThumbTop(calculatedThumbTop);
-    }, [clearHideTimer, showArrows, scrollbarWidth, thumbMinHeight]);
+    }, [
+        findScrollableElement,
+        clearHideTimer,
+        showArrows,
+        finalThumbWidth,
+        thumbMinHeight,
+        finalAutoHideConfig.enabled,
+    ]);
     // 썸 드래그 시작
     const handleThumbMouseDown = useCallback((event) => {
+        var _a;
         event.preventDefault();
         event.stopPropagation();
-        if (!containerRef.current)
+        const actualScrollContainer = findScrollableElement();
+        if (!actualScrollContainer) {
+            console.log("Thumb drag - no scrollable element found");
             return;
+        }
         setIsDragging(true);
         setDragStart({
             y: event.clientY,
-            scrollTop: containerRef.current.scrollTop,
+            scrollTop: actualScrollContainer.scrollTop,
         });
         clearHideTimer();
         setScrollbarVisible(true);
-    }, [clearHideTimer]);
+        // 포커스 유지 (키보드 입력이 계속 작동하도록)
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [findScrollableElement, clearHideTimer]);
     // 썸 드래그 중
     const handleMouseMove = useCallback((event) => {
-        if (!isDragging || !containerRef.current || !contentRef.current)
+        if (!isDragging)
             return;
-        const container = containerRef.current;
-        const content = contentRef.current;
-        const containerHeight = container.clientHeight;
-        const contentHeight = content.scrollHeight;
+        const actualScrollContainer = findScrollableElement();
+        if (!actualScrollContainer) {
+            console.log("Mouse move - no scrollable element found");
+            return;
+        }
+        const containerHeight = actualScrollContainer.clientHeight;
+        const contentHeight = actualScrollContainer.scrollHeight;
         const scrollableHeight = contentHeight - containerHeight;
         const deltaY = event.clientY - dragStart.y;
         const thumbScrollableHeight = containerHeight - thumbHeight;
         const scrollDelta = (deltaY / thumbScrollableHeight) * scrollableHeight;
         const newScrollTop = Math.max(0, Math.min(scrollableHeight, dragStart.scrollTop + scrollDelta));
-        container.scrollTop = newScrollTop;
+        actualScrollContainer.scrollTop = newScrollTop;
         updateScrollbar();
-    }, [isDragging, dragStart, thumbHeight, updateScrollbar]);
+    }, [
+        isDragging,
+        dragStart,
+        thumbHeight,
+        updateScrollbar,
+        findScrollableElement,
+    ]);
     // 썸 드래그 종료
     const handleMouseUp = useCallback(() => {
         setIsDragging(false);
         if (isScrollable()) {
-            setHideTimer(hideDelay); // 기본 숨김 시간 적용
+            setHideTimer(finalAutoHideConfig.delay); // 기본 숨김 시간 적용
         }
-    }, [isScrollable, setHideTimer, hideDelay]);
+    }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);
     // 트랙 클릭으로 스크롤 점프
     const handleTrackClick = useCallback((event) => {
-        if (!containerRef.current ||
-            !contentRef.current ||
-            !scrollbarRef.current)
+        var _a;
+        console.log("handleTrackClick called", event);
+        if (!scrollbarRef.current) {
+            console.log("Track click - scrollbarRef not available");
             return;
+        }
         const scrollbar = scrollbarRef.current;
         const rect = scrollbar.getBoundingClientRect();
         const clickY = event.clientY - rect.top;
-        const container = containerRef.current;
-        const content = contentRef.current;
-        const containerHeight = container.clientHeight;
-        const contentHeight = content.scrollHeight;
+        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);
-        container.scrollTop = Math.max(0, Math.min(contentHeight - containerHeight, newScrollTop));
+        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);
-    }, [updateScrollbar, setHideTimer, hideDelay]);
+        setHideTimer(finalAutoHideConfig.delay);
+        // 포커스 유지 (키보드 입력이 계속 작동하도록)
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [
+        updateScrollbar,
+        setHideTimer,
+        finalAutoHideConfig.delay,
+        findScrollableElement,
+    ]);
     // 위쪽 화살표 클릭 핸들러
     const handleUpArrowClick = useCallback((event) => {
+        var _a;
         event.preventDefault();
         event.stopPropagation();
         if (!containerRef.current)
@@ -164,10 +629,18 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
         containerRef.current.scrollTop = newScrollTop;
         updateScrollbar();
         setScrollbarVisible(true);
-        setHideTimer(hideDelay);
-    }, [updateScrollbar, setHideTimer, arrowStep, hideDelay]);
+        setHideTimer(finalAutoHideConfig.delay);
+        // 포커스 유지 (키보드 입력이 계속 작동하도록)
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [
+        updateScrollbar,
+        setHideTimer,
+        arrowStep,
+        finalAutoHideConfig.delay,
+    ]);
     // 아래쪽 화살표 클릭 핸들러
     const handleDownArrowClick = useCallback((event) => {
+        var _a;
         event.preventDefault();
         event.stopPropagation();
         if (!containerRef.current || !contentRef.current)
@@ -179,20 +652,90 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
         container.scrollTop = newScrollTop;
         updateScrollbar();
         setScrollbarVisible(true);
-        setHideTimer(hideDelay);
-    }, [updateScrollbar, setHideTimer, arrowStep, hideDelay]);
-    // 스크롤 이벤트 리스너
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
+        setHideTimer(finalAutoHideConfig.delay);
+        // 포커스 유지 (키보드 입력이 계속 작동하도록)
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [
+        updateScrollbar,
+        setHideTimer,
+        arrowStep,
+        finalAutoHideConfig.delay,
+    ]);
+    // 드래그 스크롤 시작
+    const handleDragScrollStart = useCallback((event) => {
+        // 드래그 스크롤이 비활성화된 경우
+        if (!finalDragScrollConfig.enabled)
+            return;
+        // 텍스트 입력 요소나 제외 대상이면 드래그 스크롤 하지 않음
+        const target = event.target;
+        if (isTextInputElement(target, finalDragScrollConfig)) {
+            return;
+        }
+        // 오른쪽 클릭이나 휠 클릭은 제외
+        if (event.button !== 0)
+            return;
+        const scrollableElement = findScrollableElement();
+        if (!scrollableElement)
             return;
+        // 스크롤 가능한 영역이 아니면 제외
+        if (scrollableElement.scrollHeight <=
+            scrollableElement.clientHeight)
+            return;
+        event.preventDefault();
+        setIsDragScrolling(true);
+        setDragScrollStart({
+            x: event.clientX,
+            y: event.clientY,
+            scrollTop: scrollableElement.scrollTop,
+            scrollLeft: scrollableElement.scrollLeft || 0,
+        });
+        // 스크롤바 표시
+        clearHideTimer();
+        setScrollbarVisible(true);
+    }, [
+        finalDragScrollConfig,
+        isTextInputElement,
+        findScrollableElement,
+        clearHideTimer,
+    ]);
+    // 드래그 스크롤 중
+    const handleDragScrollMove = useCallback((event) => {
+        if (!isDragScrolling)
+            return;
+        const scrollableElement = findScrollableElement();
+        if (!scrollableElement)
+            return;
+        dragScrollStart.x - event.clientX;
+        const deltaY = dragScrollStart.y - event.clientY;
+        // 세로 스크롤만 처리 (가로 스크롤은 필요시 나중에 추가)
+        const newScrollTop = Math.max(0, Math.min(scrollableElement.scrollHeight -
+            scrollableElement.clientHeight, dragScrollStart.scrollTop + deltaY));
+        scrollableElement.scrollTop = newScrollTop;
+        updateScrollbar();
+    }, [
+        isDragScrolling,
+        dragScrollStart,
+        findScrollableElement,
+        updateScrollbar,
+    ]);
+    // 드래그 스크롤 종료
+    const handleDragScrollEnd = useCallback(() => {
+        setIsDragScrolling(false);
+        if (isScrollable()) {
+            setHideTimer(finalAutoHideConfig.delay);
+        }
+    }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);
+    // 스크롤 이벤트 리스너 (externalScrollContainer 우선 사용)
+    useEffect(() => {
         const handleScroll = (event) => {
             updateScrollbar();
             // 스크롤 중에는 스크롤바 표시
             clearHideTimer();
             setScrollbarVisible(true);
             // 휠 스크롤 중이면 빠른 숨김, 아니면 기본 숨김 시간 적용
-            const delay = isWheelScrolling ? hideDelayOnWheel : hideDelay;
+            const delay = isWheelScrolling
+                ? finalAutoHideConfig.delayOnWheel
+                : finalAutoHideConfig.delay;
             setHideTimer(delay);
             if (onScroll) {
                 onScroll(event);
@@ -212,28 +755,62 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
             clearHideTimer();
             setScrollbarVisible(true);
         };
-        container.addEventListener("scroll", handleScroll, {
-            passive: true,
-        });
-        container.addEventListener("wheel", handleWheel, {
-            passive: true,
+        const elementsToWatch = [];
+        // 실제 스크롤 가능한 요소 찾기
+        const scrollableElement = findScrollableElement();
+        if (scrollableElement) {
+            elementsToWatch.push(scrollableElement);
+            console.log("OverlayScrollbar: watching scrollable element for events", scrollableElement);
+        }
+        // fallback: 내부 컨테이너와 children 요소도 감지
+        const container = containerRef.current;
+        if (container && !scrollableElement) {
+            elementsToWatch.push(container);
+            // children 요소들의 스크롤도 감지
+            const childScrollableElements = container.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');
+            childScrollableElements.forEach((child) => {
+                elementsToWatch.push(child);
+            });
+        }
+        // 모든 요소에 이벤트 리스너 등록
+        elementsToWatch.forEach((element) => {
+            element.addEventListener("scroll", handleScroll, {
+                passive: true,
+            });
+            element.addEventListener("wheel", handleWheel, {
+                passive: true,
+            });
         });
         return () => {
-            container.removeEventListener("scroll", handleScroll);
-            container.removeEventListener("wheel", handleWheel);
+            // 모든 이벤트 리스너 제거
+            elementsToWatch.forEach((element) => {
+                element.removeEventListener("scroll", handleScroll);
+                element.removeEventListener("wheel", handleWheel);
+            });
             if (wheelTimeoutRef.current) {
                 clearTimeout(wheelTimeoutRef.current);
             }
         };
     }, [
+        findScrollableElement,
         updateScrollbar,
         onScroll,
         clearHideTimer,
         setHideTimer,
-        hideDelay,
-        hideDelayOnWheel,
+        finalAutoHideConfig,
         isWheelScrolling,
     ]);
+    // 드래그 스크롤 전역 마우스 이벤트 리스너
+    useEffect(() => {
+        if (isDragScrolling) {
+            document.addEventListener("mousemove", handleDragScrollMove);
+            document.addEventListener("mouseup", handleDragScrollEnd);
+            return () => {
+                document.removeEventListener("mousemove", handleDragScrollMove);
+                document.removeEventListener("mouseup", handleDragScrollEnd);
+            };
+        }
+    }, [isDragScrolling, handleDragScrollMove, handleDragScrollEnd]);
     // 전역 마우스 이벤트 리스너
     useEffect(() => {
         if (isDragging) {
@@ -247,44 +824,68 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
     }, [isDragging, handleMouseMove, handleMouseUp]);
     // 초기 스크롤바 업데이트
     useEffect(() => {
+        // 즉시 업데이트
         updateScrollbar();
+        // 약간의 지연 후에도 업데이트 (DOM이 완전히 렌더링된 후)
+        const timer = setTimeout(() => {
+            updateScrollbar();
+        }, 100);
+        return () => clearTimeout(timer);
     }, [updateScrollbar]);
+    // externalScrollContainer가 변경될 때 스크롤바 업데이트
+    useEffect(() => {
+        if (externalScrollContainer) {
+            // externalScrollContainer가 설정된 후 스크롤바 업데이트
+            const timer = setTimeout(() => {
+                updateScrollbar();
+            }, 50);
+            return () => clearTimeout(timer);
+        }
+    }, [externalScrollContainer, updateScrollbar]);
     // 컴포넌트 초기화 완료 표시 (hover 이벤트 활성화용)
     useEffect(() => {
         const timer = setTimeout(() => {
             setIsInitialized(true);
-        }, 100); // 100ms 후 초기화 완료
+            console.log("OverlayScrollbar initialized", {
+                containerRef: !!containerRef.current,
+                contentRef: !!contentRef.current,
+                isScrollable: isScrollable(),
+                autoHideEnabled: finalAutoHideConfig.enabled,
+            });
+            // 초기화 후 스크롤바 업데이트 (썸 높이 정확하게 계산)
+            updateScrollbar();
+            // 자동 숨김이 비활성화되어 있으면 스크롤바를 항상 표시
+            if (!finalAutoHideConfig.enabled && isScrollable()) {
+                setScrollbarVisible(true);
+            }
+        }, 100);
         return () => clearTimeout(timer);
-    }, []);
+    }, [isScrollable, updateScrollbar, finalAutoHideConfig.enabled]);
     // Resize observer로 크기 변경 감지
     useEffect(() => {
-        if (!containerRef.current || !contentRef.current)
-            return;
         const resizeObserver = new ResizeObserver(() => {
             updateScrollbar();
         });
-        resizeObserver.observe(containerRef.current);
-        resizeObserver.observe(contentRef.current);
-        return () => resizeObserver.disconnect();
-    }, [updateScrollbar]);
-    // 계산된 값들을 메모이제이션하여 안정화
-    const { finalThumbWidth, finalTrackWidth } = useMemo(() => {
-        const computedThumbWidth = thumbWidth !== undefined ? thumbWidth : scrollbarWidth;
-        let computedTrackWidth = trackWidth !== undefined ? trackWidth : scrollbarWidth * 2;
-        // thumbWidth가 trackWidth보다 크거나 같으면 trackWidth를 thumbWidth와 같게 설정
-        if (computedThumbWidth >= computedTrackWidth) {
-            computedTrackWidth = computedThumbWidth;
+        const elementsToObserve = [];
+        // externalScrollContainer가 있으면 우선 관찰
+        if (externalScrollContainer) {
+            elementsToObserve.push(externalScrollContainer);
         }
-        return {
-            finalThumbWidth: computedThumbWidth,
-            finalTrackWidth: computedTrackWidth,
-        };
-    }, [thumbWidth, trackWidth, scrollbarWidth]);
-    // 썸 radius 계산 (기본값: thumbWidth / 2)
-    const calculatedThumbRadius = thumbRadius !== undefined ? thumbRadius : finalThumbWidth / 2;
-    // 화살표 색상 계산 (기본값: 독립적인 색상)
-    const finalArrowColor = arrowColor || "rgba(128, 128, 128, 0.8)";
-    const finalArrowActiveColor = arrowActiveColor || "rgba(128, 128, 128, 1.0)";
+        // 내부 컨테이너들도 관찰
+        if (containerRef.current) {
+            elementsToObserve.push(containerRef.current);
+        }
+        if (contentRef.current) {
+            elementsToObserve.push(contentRef.current);
+        }
+        // 모든 요소들 관찰 시작
+        elementsToObserve.forEach((element) => {
+            resizeObserver.observe(element);
+        });
+        return () => resizeObserver.disconnect();
+    }, [updateScrollbar, externalScrollContainer]);
+    // trackWidth가 thumbWidth보다 작으면 thumbWidth와 같게 설정
+    const adjustedTrackWidth = Math.max(finalTrackWidth, finalThumbWidth);
     // 웹킷 스크롤바 숨기기용 CSS 동적 주입
     useEffect(() => {
         const styleId = "overlay-scrollbar-webkit-hide";
@@ -307,6 +908,14 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
                 .overlay-scrollbar-container::-webkit-scrollbar-thumb {
                     display: none !important;
                 }
+                .overlay-scrollbar-container:focus {
+                    outline: 2px solid rgba(0, 123, 255, 0.3);
+                    outline-offset: -2px;
+                }
+                .overlay-scrollbar-container:focus-visible {
+                    outline: 2px solid rgba(0, 123, 255, 0.5);
+                    outline-offset: -2px;
+                }
             `;
         document.head.appendChild(style);
         return () => {
@@ -316,68 +925,100 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
             }
         };
     }, []);
-    return (jsxs("div", { className: `overlay-scrollbar-wrapper ${className}`, style: Object.assign({ display: "flex", flexDirection: "column", position: "relative", minHeight: 0, height: "100%", flex: "1 1 0%" }, style), children: [jsx("div", { ref: containerRef, className: "overlay-scrollbar-container", style: {
+    return (jsxs("div", { className: `overlay-scrollbar-wrapper ${className}`, style: Object.assign({ display: "flex", flexDirection: "column", position: "relative", minHeight: 0, height: "100%", flex: "1 1 0%" }, style), children: [jsx("div", { ref: containerRef, className: "overlay-scrollbar-container", tabIndex: -1, onMouseDown: handleDragScrollStart, style: {
                     width: "100%", // 명시적 너비 설정
-                    height: "100%", // 상위 컨테이너의 전체 높이 사용
+                    height: "100%", // 부모의 전체 높이 사용
+                    flex: "1 1 auto", // flex item으로 설정하여 높이를 자동으로 계산
                     minHeight: 0, // 최소 높이 보장
                     overflow: "auto", // 네이티브 스크롤 기능 유지
                     // 브라우저 기본 스크롤바만 숨기기
                     scrollbarWidth: "none", // Firefox
                     msOverflowStyle: "none", // IE/Edge
+                    // 키보드 포커스 스타일 (접근성)
+                    outline: "none", // 기본 아웃라인 제거
+                    userSelect: isDragScrolling ? "none" : "auto", // 드래그 중 텍스트 선택 방지
                 }, children: jsx("div", { ref: contentRef, className: "overlay-scrollbar-content", style: {
-                        minHeight: "100%",
+                        height: "100%", // min-height 대신 height 사용
+                        minHeight: 0, // flex shrink 허용
+                        display: "flex", // flex 컨테이너로 설정
+                        flexDirection: "column", // 세로 방향 정렬
                     }, children: children }) }), showScrollbar && (jsxs("div", { ref: scrollbarRef, className: "overlay-scrollbar-track", onMouseEnter: () => {
-                    if (isScrollable()) {
-                        clearHideTimer();
-                        setScrollbarVisible(true);
-                    }
+                    console.log("Track hover enter", {
+                        isScrollable: isScrollable(),
+                        scrollbarVisible,
+                    });
+                    clearHideTimer();
+                    setScrollbarVisible(true);
                 }, onMouseLeave: () => {
-                    if (!isDragging && isScrollable()) {
-                        setHideTimer(hideDelay);
+                    console.log("Track hover leave", { isDragging });
+                    if (!isDragging) {
+                        setHideTimer(finalAutoHideConfig.delay);
                     }
                 }, style: {
                     position: "absolute",
                     top: 0,
-                    right: 0, // 완전히 오른쪽에 붙임
-                    width: `${finalTrackWidth}px`, // hover 영역 너비
+                    right: 0,
+                    width: `${adjustedTrackWidth}px`,
                     height: "100%",
                     opacity: scrollbarVisible ? 1 : 0,
                     transition: "opacity 0.2s ease-in-out",
                     cursor: "pointer",
                     zIndex: 1000,
-                    pointerEvents: "auto", // 항상 이벤트 활성화 (hover 감지용)
-                }, children: [jsx("div", { className: "overlay-scrollbar-track-background", onClick: handleTrackClick, style: {
+                    pointerEvents: "auto",
+                }, children: [finalTrackConfig.visible && (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
-                                ? `${finalThumbWidth + 8}px`
-                                : "4px",
-                            right: `${(finalTrackWidth - finalThumbWidth) / 2}px`, // 트랙 가운데 정렬
-                            width: `${finalThumbWidth}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% - ${finalThumbWidth * 2 + 16}px)`
-                                : "calc(100% - 8px)",
-                            backgroundColor: trackColor,
-                            borderRadius: `${calculatedThumbRadius}px`,
+                                ? `calc(100% - ${finalThumbConfig.width * 2 +
+                                    finalTrackConfig.margin * 4}px)`
+                                : `calc(100% - ${finalTrackConfig.margin * 2}px)`,
+                            backgroundColor: finalTrackConfig.color,
+                            borderRadius: `${finalTrackConfig.radius}px`,
                             cursor: "pointer",
-                        } }), jsx("div", { ref: thumbRef, className: "overlay-scrollbar-thumb", onMouseDown: handleThumbMouseDown, style: {
+                        } })), 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: `${(finalTrackWidth - 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
-                                ? thumbActiveColor
-                                : thumbColor,
-                            borderRadius: `${calculatedThumbRadius}px`,
+                            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 && (jsx("div", { className: "overlay-scrollbar-up-arrow", onClick: handleUpArrowClick, onMouseEnter: () => setHoveredArrow("up"), onMouseLeave: () => setHoveredArrow(null), style: {
                     position: "absolute",
-                    top: "4px",
-                    right: `${(finalTrackWidth - finalThumbWidth) / 2}px`, // 트랙 가운데 정렬
+                    top: `${finalTrackConfig.margin}px`,
+                    right: finalTrackConfig.alignment === "right"
+                        ? "0px"
+                        : `${(adjustedTrackWidth -
+                            finalThumbWidth) /
+                            2}px`, // 트랙 정렬
                     width: `${finalThumbWidth}px`,
                     height: `${finalThumbWidth}px`,
                     cursor: "pointer",
@@ -386,16 +1027,24 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
                     justifyContent: "center",
                     fontSize: `${Math.max(finalThumbWidth * 0.75, 8)}px`,
                     color: hoveredArrow === "up"
-                        ? finalArrowActiveColor
-                        : finalArrowColor,
+                        ? 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 && (jsx("div", { className: "overlay-scrollbar-down-arrow", onClick: handleDownArrowClick, onMouseEnter: () => setHoveredArrow("down"), onMouseLeave: () => setHoveredArrow(null), style: {
                     position: "absolute",
-                    bottom: "4px",
-                    right: `${(finalTrackWidth - finalThumbWidth) / 2}px`, // 트랙 가운데 정렬
+                    bottom: `${finalTrackConfig.margin}px`,
+                    right: finalTrackConfig.alignment === "right"
+                        ? "0px"
+                        : `${(adjustedTrackWidth -
+                            finalThumbWidth) /
+                            2}px`, // 트랙 정렬
                     width: `${finalThumbWidth}px`,
                     height: `${finalThumbWidth}px`,
                     cursor: "pointer",
@@ -404,11 +1053,15 @@ thumbRadius, showScrollbar = true, showArrows = false, arrowStep = 50, trackWidt
                     justifyContent: "center",
                     fontSize: `${Math.max(finalThumbWidth * 0.75, 8)}px`,
                     color: hoveredArrow === "down"
-                        ? finalArrowActiveColor
-                        : finalArrowColor,
+                        ? 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" }))] }));
 });