@ehfuse/overlay-scrollbar 1.3.0 β 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -6
- package/dist/index.d.ts +15 -5
- package/dist/index.esm.js +282 -142
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +281 -141
- package/dist/index.js.map +1 -1
- package/dist/src/OverlayScrollbar.d.ts +15 -5
- package/dist/src/OverlayScrollbar.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@ A highly customizable React component that provides a beautiful overlay scrollba
|
|
|
17
17
|
- β‘ **Smooth Animations** - Fade transitions and hover effects
|
|
18
18
|
- π **Smart Auto-hide** - Intelligent visibility management
|
|
19
19
|
- π§ **Smart Input Detection** - Excludes interactive elements automatically
|
|
20
|
-
-
|
|
20
|
+
- π€ **Auto-Detection** - Automatically finds scrollable containers (Virtuoso, react-window, etc.)
|
|
21
21
|
- π§ **TypeScript** - Complete type definitions
|
|
22
22
|
- πͺΆ **Zero Dependencies** - Only requires React
|
|
23
23
|
- βΏ **Accessible** - Preserves native scroll behavior
|
|
@@ -30,7 +30,7 @@ A highly customizable React component that provides a beautiful overlay scrollba
|
|
|
30
30
|
- β‘ **λΆλλ¬μ΄ μ λλ©μ΄μ
** - νμ΄λ μ ν λ° νΈλ² ν¨κ³Ό
|
|
31
31
|
- π **μ€λ§νΈ μλ μ¨κΉ** - μ§λ₯μ μΈ νμ κ΄λ¦¬
|
|
32
32
|
- π§ **μ€λ§νΈ μ
λ ₯ κ°μ§** - μΈν°λν°λΈ μμ μλ μ μΈ
|
|
33
|
-
-
|
|
33
|
+
- π€ **μλ κ°μ§** - μ€ν¬λ‘€ κ°λ₯ν 컨ν
μ΄λ μλ κ²μ (Virtuoso, react-window λ±)
|
|
34
34
|
- π§ **TypeScript** - μμ ν νμ
μ μ
|
|
35
35
|
- πͺΆ **μμ‘΄μ± μμ** - Reactλ§ νμ
|
|
36
36
|
- βΏ **μ κ·Όμ±** - κΈ°λ³Έ μ€ν¬λ‘€ λμ 보쑴
|
|
@@ -74,20 +74,30 @@ function App() {
|
|
|
74
74
|
|
|
75
75
|
## π― Main API
|
|
76
76
|
|
|
77
|
-
### Configuration Objects (v1.
|
|
77
|
+
### Configuration Objects (v1.4.0+)
|
|
78
78
|
|
|
79
79
|
```tsx
|
|
80
80
|
interface OverlayScrollbarProps {
|
|
81
|
+
children: ReactNode;
|
|
82
|
+
className?: string;
|
|
83
|
+
style?: React.CSSProperties;
|
|
84
|
+
onScroll?: (event: Event) => void;
|
|
85
|
+
|
|
81
86
|
// Grouped configuration objects
|
|
82
87
|
thumb?: ThumbConfig; // Scrollbar thumb settings
|
|
83
88
|
track?: TrackConfig; // Track area settings
|
|
84
89
|
arrows?: ArrowsConfig; // Arrow buttons settings
|
|
85
90
|
dragScroll?: DragScrollConfig; // Drag scroll settings
|
|
91
|
+
autoHide?: AutoHideConfig; // Auto-hide behavior settings
|
|
86
92
|
|
|
87
93
|
// General settings
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
94
|
+
showScrollbar?: boolean; // Show scrollbar (default: true)
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
interface AutoHideConfig {
|
|
98
|
+
enabled?: boolean; // Enable auto-hide (default: true)
|
|
99
|
+
delay?: number; // Auto-hide delay (default: 1500ms)
|
|
100
|
+
delayOnWheel?: number; // Quick hide after wheel (default: 700ms)
|
|
91
101
|
}
|
|
92
102
|
```
|
|
93
103
|
|
package/dist/index.d.ts
CHANGED
|
@@ -29,37 +29,47 @@ interface ThumbConfig {
|
|
|
29
29
|
minHeight?: number;
|
|
30
30
|
radius?: number;
|
|
31
31
|
color?: string;
|
|
32
|
-
|
|
32
|
+
opacity?: number;
|
|
33
|
+
hoverColor?: string;
|
|
34
|
+
hoverOpacity?: number;
|
|
33
35
|
}
|
|
34
36
|
interface TrackConfig {
|
|
35
37
|
width?: number;
|
|
36
38
|
color?: string;
|
|
37
39
|
visible?: boolean;
|
|
40
|
+
alignment?: "center" | "right";
|
|
41
|
+
radius?: number;
|
|
42
|
+
margin?: number;
|
|
38
43
|
}
|
|
39
44
|
interface ArrowsConfig {
|
|
40
45
|
visible?: boolean;
|
|
41
46
|
step?: number;
|
|
42
47
|
color?: string;
|
|
43
|
-
|
|
48
|
+
opacity?: number;
|
|
49
|
+
hoverColor?: string;
|
|
50
|
+
hoverOpacity?: number;
|
|
44
51
|
}
|
|
45
52
|
interface DragScrollConfig {
|
|
46
53
|
enabled?: boolean;
|
|
47
54
|
excludeClasses?: string[];
|
|
48
55
|
excludeSelectors?: string[];
|
|
49
56
|
}
|
|
57
|
+
interface AutoHideConfig {
|
|
58
|
+
enabled?: boolean;
|
|
59
|
+
delay?: number;
|
|
60
|
+
delayOnWheel?: number;
|
|
61
|
+
}
|
|
50
62
|
interface OverlayScrollbarProps {
|
|
51
63
|
className?: string;
|
|
52
64
|
style?: React.CSSProperties;
|
|
53
65
|
children: ReactNode;
|
|
54
66
|
onScroll?: (event: Event) => void;
|
|
55
|
-
scrollContainer?: HTMLElement | null;
|
|
56
67
|
thumb?: ThumbConfig;
|
|
57
68
|
track?: TrackConfig;
|
|
58
69
|
arrows?: ArrowsConfig;
|
|
59
70
|
dragScroll?: DragScrollConfig;
|
|
71
|
+
autoHide?: AutoHideConfig;
|
|
60
72
|
showScrollbar?: boolean;
|
|
61
|
-
hideDelay?: number;
|
|
62
|
-
hideDelayOnWheel?: number;
|
|
63
73
|
}
|
|
64
74
|
interface OverlayScrollbarRef {
|
|
65
75
|
getScrollContainer: () => HTMLDivElement | null;
|