0
# Static Methods
1

2
Global methods available on the OverlayScrollbars constructor for configuration, validation, extension management, and accessing global information.
3

4
## Global Information
5

6
### globals()
7

8
```javascript { .api }
9
OverlayScrollbars.globals(): OverlayScrollbarsGlobals;
10
```
11

12
Returns global information about the plugin and browser capabilities.
13

14
**Returns:** Object containing global plugin state and browser support information
15

16
```javascript
17
const globals = OverlayScrollbars.globals();
18

19
console.log(globals.defaultOptions); // Current default options
20
console.log(globals.supportMutationObserver); // Browser support info
21
console.log(globals.nativeScrollbarSize); // { x: 17, y: 17 }
22
console.log(globals.autoUpdateRecommended); // Whether auto-update is recommended
23
```
24

25
## Default Options Management
26

27
### defaultOptions()
28

29
```javascript { .api }
30
OverlayScrollbars.defaultOptions(newOptions?: OverlayScrollbarsOptions): OverlayScrollbarsOptions;
31
```
32

33
Gets or sets the default options for all new plugin initializations.
34

35
**Parameters:**
36
- `newOptions` (Object, optional) - New default options to merge with existing defaults
37

38
**Returns:** Current default options object (always returns a copy)
39

40
```javascript
41
// Get current default options
42
const currentDefaults = OverlayScrollbars.defaultOptions();
43

44
// Set new default options (merged with existing)
45
OverlayScrollbars.defaultOptions({
46
  className: "os-theme-light",
47
  scrollbars: {
48
    autoHide: "leave",
49
    autoHideDelay: 1000
50
  },
51
  callbacks: {
52
    onInitialized: function() {
53
      console.log("OverlayScrollbars initialized");
54
    }
55
  }
56
});
57

58
// Future instances will inherit these defaults
59
const instance = OverlayScrollbars(element, {}); // Uses updated defaults
60
```
61

62
## Instance Validation
63

64
### valid()
65

66
```javascript { .api }
67
OverlayScrollbars.valid(instance: any): boolean;
68
```
69

70
Checks whether the passed value is a valid, non-destroyed OverlayScrollbars instance.
71

72
**Parameters:**
73
- `instance` (any) - Value to check for validity
74

75
**Returns:** `true` if the value is a valid OverlayScrollbars instance, `false` otherwise
76

77
```javascript
78
const instance = OverlayScrollbars(element, {});
79

80
console.log(OverlayScrollbars.valid(instance)); // true
81
console.log(OverlayScrollbars.valid(null)); // false
82
console.log(OverlayScrollbars.valid({})); // false
83

84
// After destruction
85
instance.destroy();
86
console.log(OverlayScrollbars.valid(instance)); // false
87
```
88

89
## Extension Management
90

91
### extension()
92

93
```javascript { .api }
94
OverlayScrollbars.extension(
95
  extensionName?: string,
96
  extension?: ExtensionConstructor | any,
97
  defaultOptions?: object
98
): OverlayScrollbarsExtension | OverlayScrollbarsExtension[] | boolean;
99
```
100

101
Registers, unregisters, or retrieves extensions.
102

103
**Parameters:**
104
- `extensionName` (String, optional) - Name of the extension
105
- `extension` (Function|any, optional) - Extension constructor function or value to unregister
106
- `defaultOptions` (Object, optional) - Default options for the extension
107

108
**Returns:** 
109
- Extension object (when getting single extension)
110
- Array of all extensions (when getting all)
111
- Boolean indicating success/failure (when registering/unregistering)
112

113
```javascript
114
// Get all registered extensions
115
const allExtensions = OverlayScrollbars.extension();
116

117
// Get specific extension
118
const myExtension = OverlayScrollbars.extension('myExtension');
119

120
// Register new extension
121
const success = OverlayScrollbars.extension('myExtension', function(instance, options) {
122
  // Extension constructor
123
  return {
124
    // Extension implementation
125
    added: function() {
126
      console.log('Extension added to instance');
127
    },
128
    removed: function() {
129
      console.log('Extension removed from instance');
130
    }
131
  };
132
}, {
133
  // Default options for the extension
134
  defaultValue: true,
135
  timeout: 1000
136
});
137

138
// Unregister extension
139
const removed = OverlayScrollbars.extension('myExtension', null);
140
```
141

142
## Usage Examples
143

144
### Setting Up Global Defaults
145

146
```javascript
147
// Configure defaults before any initialization
148
OverlayScrollbars.defaultOptions({
149
  className: "custom-theme",
150
  resize: "both",
151
  scrollbars: {
152
    visibility: "auto",
153
    autoHide: "scroll",
154
    autoHideDelay: 800,
155
    touchSupport: true
156
  },
157
  callbacks: {
158
    onInitialized: function() {
159
      console.log('Instance initialized with defaults');
160
    },
161
    onUpdated: function() {
162
      console.log('Instance updated');
163
    }
164
  }
165
});
166

167
// All subsequent initializations inherit these defaults
168
const instance1 = OverlayScrollbars('.content1', {});
169
const instance2 = OverlayScrollbars('.content2', {
170
  // Only override specific options
171
  className: "special-theme"
172
});
173
```
174

175
### Extension Registration Pattern
176

177
```javascript
178
// Register a custom extension
179
OverlayScrollbars.extension('autoScroller', function(instance, options) {
180
  let intervalId;
181
  
182
  return {
183
    added: function() {
184
      if (options.enabled) {
185
        intervalId = setInterval(() => {
186
          const state = instance.getState();
187
          if (!state.destroyed) {
188
            instance.scroll({ y: '+=' + options.speed });
189
          }
190
        }, options.interval);
191
      }
192
    },
193
    
194
    removed: function() {
195
      if (intervalId) {
196
        clearInterval(intervalId);
197
      }
198
    }
199
  };
200
}, {
201
  // Default extension options
202
  enabled: false,
203
  speed: 10,
204
  interval: 100
205
});
206

207
// Use the extension
208
const instance = OverlayScrollbars(element, {}, {
209
  autoScroller: {
210
    enabled: true,
211
    speed: 5
212
  }
213
});
214
```
215

216
### Browser Capability Detection
217

218
```javascript
219
const globals = OverlayScrollbars.globals();
220

221
// Check browser support
222
if (globals.supportMutationObserver) {
223
  console.log('Browser supports MutationObserver');
224
}
225

226
if (globals.supportResizeObserver) {
227
  console.log('Browser supports ResizeObserver');
228
}
229

230
// Get native scrollbar information
231
const nativeSize = globals.nativeScrollbarSize;
232
console.log(`Native scrollbar size: ${nativeSize.x}px x ${nativeSize.y}px`);
233

234
// Check if native scrollbars are overlaid (like on macOS)
235
if (globals.nativeScrollbarIsOverlaid.x) {
236
  console.log('Native horizontal scrollbars are overlaid');
237
}
238
```
239

240
## Types
241

242
```javascript { .api }
243
interface OverlayScrollbarsGlobals {
244
  defaultOptions: OverlayScrollbarsOptions;
245
  autoUpdateRecommended: boolean;
246
  supportMutationObserver: boolean;
247
  supportResizeObserver: boolean;
248
  supportPassiveEvents: boolean;
249
  supportTransform: boolean;
250
  supportTransition: boolean;
251
  restrictedMeasuring: boolean;
252
  nativeScrollbarStyling: boolean;
253
  cssCalc: string | null;
254
  nativeScrollbarSize: { x: number; y: number };
255
  nativeScrollbarIsOverlaid: { x: boolean; y: boolean };
256
  overlayScrollbarDummySize: { x: number; y: number };
257
  rtlScrollBehavior: { i: boolean; n: boolean };
258
}
259

260
interface OverlayScrollbarsExtension {
261
  added(instance: OverlayScrollbarsInstance, options: object): void;
262
  removed?(): void;
263
}
264

265
type ExtensionConstructor = (
266
  instance: OverlayScrollbarsInstance,
267
  options: object
268
) => OverlayScrollbarsExtension;
269
```