0
# Core Scrollbar Management
1

2
Primary interface for creating, managing, and destroying scrollbar instances on DOM elements. Provides both single-element and batch operations.
3

4
## Capabilities
5

6
### Initialize Single Scrollbar
7

8
Creates a scrollbar instance on a specific DOM element with optional configuration.
9

10
```typescript { .api }
11
/**
12
 * Initializes a scrollbar on the given element
13
 * @param elem - The DOM element to initialize scrollbar on
14
 * @param options - Optional configuration options
15
 * @returns Scrollbar instance for the element
16
 */
17
static init(elem: HTMLElement, options?: Partial<ScrollbarOptions>): Scrollbar;
18
```
19

20
**Usage Examples:**
21

22
```typescript
23
import Scrollbar from "smooth-scrollbar";
24

25
// Basic initialization
26
const container = document.querySelector("#content");
27
const scrollbar = Scrollbar.init(container);
28

29
// With custom options
30
const scrollbar = Scrollbar.init(container, {
31
  damping: 0.05,
32
  thumbMinSize: 40,
33
  alwaysShowTracks: true,
34
  continuousScrolling: false
35
});
36
```
37

38
### Initialize All Scrollbars
39

40
Automatically initializes scrollbars on all elements with the `data-scrollbar` attribute.
41

42
```typescript { .api }
43
/**
44
 * Automatically init scrollbar on all elements with [data-scrollbar] attribute
45
 * @param options - Optional configuration options applied to all instances
46
 * @returns Array of created scrollbar instances
47
 */
48
static initAll(options?: Partial<ScrollbarOptions>): Scrollbar[];
49
```
50

51
**Usage Examples:**
52

53
```typescript
54
// HTML: <div data-scrollbar>...</div>
55
const scrollbars = Scrollbar.initAll();
56

57
// With options applied to all
58
const scrollbars = Scrollbar.initAll({
59
  damping: 0.1,
60
  renderByPixels: true
61
});
62
```
63

64
### Check Scrollbar Existence
65

66
Checks if a scrollbar instance exists on a given element.
67

68
```typescript { .api }
69
/**
70
 * Check if there is a scrollbar on given element
71
 * @param elem - The DOM element to check
72
 * @returns True if scrollbar exists on element
73
 */
74
static has(elem: HTMLElement): boolean;
75
```
76

77
### Get Scrollbar Instance
78

79
Retrieves the scrollbar instance for a specific element.
80

81
```typescript { .api }
82
/**
83
 * Gets scrollbar on the given element
84
 * @param elem - The DOM element to get scrollbar from
85
 * @returns Scrollbar instance or undefined if none exists
86
 */
87
static get(elem: HTMLElement): Scrollbar | undefined;
88
```
89

90
**Usage Examples:**
91

92
```typescript
93
const container = document.querySelector("#content");
94

95
if (Scrollbar.has(container)) {
96
  const scrollbar = Scrollbar.get(container);
97
  scrollbar.scrollTo(0, 100);
98
}
99
```
100

101
### Get All Scrollbar Instances
102

103
Returns an array containing all active scrollbar instances.
104

105
```typescript { .api }
106
/**
107
 * Returns an array that contains all scrollbar instances
108
 * @returns Array of all active scrollbar instances
109
 */
110
static getAll(): Scrollbar[];
111
```
112

113
**Usage Examples:**
114

115
```typescript
116
// Update all scrollbars
117
const allScrollbars = Scrollbar.getAll();
118
allScrollbars.forEach(scrollbar => {
119
  scrollbar.update();
120
});
121

122
// Get total scroll position across all scrollbars
123
const totalScrollY = allScrollbars.reduce((sum, sb) => sum + sb.scrollTop, 0);
124
```
125

126
### Destroy Single Scrollbar
127

128
Removes and cleans up a scrollbar instance from a specific element.
129

130
```typescript { .api }
131
/**
132
 * Removes scrollbar on the given element
133
 * @param elem - The DOM element to remove scrollbar from
134
 */
135
static destroy(elem: HTMLElement): void;
136
```
137

138
### Destroy All Scrollbars
139

140
Removes and cleans up all scrollbar instances from the current document.
141

142
```typescript { .api }
143
/**
144
 * Removes all scrollbar instances from current document
145
 */
146
static destroyAll(): void;
147
```
148

149
**Usage Examples:**
150

151
```typescript
152
// Clean up single scrollbar
153
const container = document.querySelector("#content");
154
Scrollbar.destroy(container);
155

156
// Clean up all scrollbars (useful for SPA route changes)
157
Scrollbar.destroyAll();
158
```
159

160
### Plugin Registration
161

162
Registers plugins to be available for all scrollbar instances.
163

164
```typescript { .api }
165
/**
166
 * Attaches plugins to scrollbars
167
 * @param Plugins - Scrollbar plugin classes to register
168
 */
169
static use(...Plugins: (typeof ScrollbarPlugin)[]): void;
170
```
171

172
**Usage Examples:**
173

174
```typescript
175
import Scrollbar from "smooth-scrollbar";
176
import OverscrollPlugin from "smooth-scrollbar/plugins/overscroll";
177

178
// Register plugins globally
179
Scrollbar.use(OverscrollPlugin);
180

181
// Now all scrollbars can use the overscroll plugin
182
const scrollbar = Scrollbar.init(container, {
183
  plugins: {
184
    overscroll: {
185
      effect: "bounce",
186
      damping: 0.15
187
    }
188
  }
189
});
190
```
191

192
### Style Management
193

194
Controls the attachment and removal of default scrollbar styles.
195

196
```typescript { .api }
197
/**
198
 * Attaches default style sheets to current document
199
 */
200
static attachStyle(): void;
201

202
/**
203
 * Removes default styles from current document
204
 */
205
static detachStyle(): void;
206
```
207

208
**Usage Examples:**
209

210
```typescript
211
// Remove default styles to use custom CSS
212
Scrollbar.detachStyle();
213

214
// Re-attach default styles if needed
215
Scrollbar.attachStyle();
216
```
217

218
## Static Properties
219

220
```typescript { .api }
221
interface SmoothScrollbar {
222
  /** Package version string */
223
  static version: string;
224
  
225
  /** Reference to ScrollbarPlugin base class */
226
  static ScrollbarPlugin: typeof ScrollbarPlugin;
227
}
228
```