KingSora/OverlayScrollbars

The only required field is the target field. This is the field to which the plugin will be applied.
If you use the object initialization with only the target field, the result is equivalent to the element initialization:

// Both initializations have the same outcome

OverlayScrollbars(document.querySelector('#myElement'), {});
OverlayScrollbars({ target: document.querySelector('#myElement') }, {});

When initializing with an object you can specify how the library handles generated elements. For example, you can specify an existing element as the `viewport' element. Then the library won't generate it, but use the specified element instead:

OverlayScrollbars({ 
 target: document.querySelector('#target'),
 elements: {
   viewport: document.querySelector('#viewport'),
 },
}, {});

This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to create its own elements. These cases are very common when you want another library to work with OverlayScrollbars.

You can also decide to which element the scrollbars should be applied to:

OverlayScrollbars({ 
 target: document.querySelector('#target'),
 scrollbars: {
   slot: document.querySelector('#target').parentElement,
 },
}, {});

Last but not least, you can decide when to cancel the initialization:

OverlayScrollbars({ 
 target: document.querySelector('#target'),
 cancel: {
   nativeScrollbarsOverlaid: true,
   body: null,
 }
}, {});

In the above example, the initialization will be aborted if the native scrollbars are overlaid, or if your target is a body element and the plugin has determined that initializing to the body element would interfere with native functionality such as window.scrollTo.

CSS Custom properties

OverlayScrollbars provides the following CSS Custom Properties:

Viewport styling:

[data-overlayscrollbars-viewport] {
  overflow-x: var(--os-viewport-overflow-x);
  overflow-y: var(--os-viewport-overflow-y);
}

You can use the --os-viewport-overflow-x and --os-viewport-overflow-y properties to re-apply the correct overflow styles in case other styling rules (e.g. from 3rd party libraries) are overwriting them.

Scrollbar styling:

.os-scrollbar {
  // The size of the scrollbar
  --os-size: 0;
  // The axis-perpendicular padding of the scrollbar (horizontal: padding-y, vertical: padding-x)
  --os-padding-perpendicular: 0;
  // The axis padding of the scrollbar (horizontal: padding-x, vertical: padding-y)
  --os-padding-axis: 0;
  // The border radius of the scrollbar track
  --os-track-border-radius: 0;
  // The background of the scrollbar track
  --os-track-bg: none;
  // The :hover background of the scrollbar track
  --os-track-bg-hover: none;
  // The :active background of the scrollbar track
  --os-track-bg-active: none;
  // The border of the scrollbar track
  --os-track-border: none;
  // The :hover background of the scrollbar track
  --os-track-border-hover: none;
  // The :active background of the scrollbar track
  --os-track-border-active: none;
  // The border radius of the scrollbar handle
  --os-handle-border-radius: 0;
  // The background of the scrollbar handle
  --os-handle-bg: none;
  // The :hover background of the scrollbar handle
  --os-handle-bg-hover: none;
  // The :active background of the scrollbar handle
  --os-handle-bg-active: none;
  // The border of the scrollbar handle
  --os-handle-border: none;
  // The :hover border of the scrollbar handle
  --os-handle-border-hover: none;
  // The :active border of the scrollbar handle
  --os-handle-border-active: none;
  // The min size of the scrollbar handle
  --os-handle-min-size: 33px;
  // The max size of the scrollbar handle
  --os-handle-max-size: none;
  // The axis-perpendicular size of the scrollbar handle (horizontal: height, vertical: width)
  --os-handle-perpendicular-size: 100%;
  // The :hover axis-perpendicular size of the scrollbar handle (horizontal: height, vertical: width)
  --os-handle-perpendicular-size-hover: 100%;
  // The :active axis-perpendicular size of the scrollbar handle (horizontal: height, vertical: width)
  --os-handle-perpendicular-size-active: 100%;
  // Increases the interactive area of the scrollbar handle.
  --os-handle-interactive-area-offset: 0;
}

You can change the properties for both scrollbars at once, or for each scrollbar axis. In the example below, I've chosen os-theme-custom as the theme name:

// Horizontal and vertical scrollbar are 10px 
.os-theme-custom {
  --os-size: 10px;
}

// Horizontal scrollbar is 10px
.os-theme-custom.os-scrollbar-horizontal {
  --os-size: 10px;
}
// Vertical scrollbar is 20px
.os-theme-custom.os-scrollbar-vertical {
  --os-size: 20px;
}

You can then use your theme by assigning it via the scrollbars.theme option:

OverlayScrollbars(document.body, {
  scrollbars: {
    theme: 'os-theme-custom'
  }
});

Since scrollbar styles are usually simple, this set of options should be enough to get the styling you want. If you need more freedom, you can create your own styles by adding styling to the base class names described in the next section.

Scrollbars structure and CSS class names

The scrollbars HTML markup looks like:

<div class="os-scrollbar os-scrollbar-horizontal">
    <div class="os-scrollbar-track">
        <div class="os-scrollbar-handle">
        </div>
    </div>
</div>
<div class="os-scrollbar os-scrollbar-vertical">
    <div class="os-scrollbar-track">
        <div class="os-scrollbar-handle">
        </div>
    </div>
</div>

The class names are simplified, in a real application the .os-scrollbar element can have additional class names which modify the appearance (mostly visibility and alignment).

Below is a list of the most important class names you will encounter:

If you create your own theme, please only use the classes listed above. All other classes are modifier classes used to change visibility, alignment and pointer-events of the scrollbars.

Gotchas

It is important that the chosen theme class name in your CSS file matches the assigned theme name in the options. If the CSS class name is .my-theme, the scrollbars.theme must be 'my-theme'.

Please be aware of your stack. For example, css-modules will change your class names to avoid naming collisions. Always check that your CSS is what you expect it to be.

The default options are:

const defaultOptions = {
  paddingAbsolute: false,
  showNativeOverlaidScrollbars: false,
  update: {
    elementEvents: [['img', 'load']],
    debounce: {
      mutation: [0, 33],
      resize: null,
      event: [33, 99],
      env: [222, 666, true],
    },
    attributes: null,
    ignoreMutation: null,
    flowDirectionStyles: null,
  },
  overflow: {
    x: 'scroll',
    y: 'scroll',
  },
  scrollbars: {
    theme: 'os-theme-dark',
    visibility: 'auto',
    autoHide: 'never',
    autoHideDelay: 1300,
    autoHideSuspend: false,
    dragScroll: true,
    clickScroll: false,
    pointers: ['mouse', 'touch', 'pen'],
  },
};

paddingAbsolute

Indicates whether the padding for the content should be absolute.

showNativeOverlaidScrollbars

Indicates whether the native overlaid scrollbars should be visible.

update.elementEvents

An array of tuples. The first value in the tuple is an selector and the second value are event names. The plugin will update itself if any of the elements with the specified selector emits any of the specified events. The default value can be interpreted as "The plugin will update itself if any img element emits a load event."

update.debounce

Options to debounce updates to fine-tune performance.

Each field in this object has the following type:

The tuple type of [timeout?: number, maxWait?: number, leading?: boolean] has three values:

• timeout: The timeout of the debounce in milliseconds.
• maxWait: The max wait of the debounce in milliseconds.
• leading: Indicates whether the debounce is also executed on the leading edge.

If a number is specified it is treated as the timeout in milliseconds.

If null is specified no debounce will take place.

Note: If 0 is used as the timeout, requestAnimationFrame will be used instead of setTimeout for the debounce.

update.debounce.mutation

Debounce updates which were triggered by a MutationObserver.

update.debounce.resize

Debounce updates which were triggered by a ResizeObserver.

update.debounce.event

Debounce updates which were triggered by an event registered in the update.elementEvents option.

update.debounce.env

Debounce updates which were triggered by environmental changes. (e.g. zooming & window resize)

update.attributes

Note: There is a base array of attributes that the MutationObserver always observes, even if this option is null.

An array of additional attributes that the MutationObserver should observe the content for.

update.ignoreMutation

A function which receives a MutationRecord as an argument. If the function returns a truthy value the mutation will be ignored and the plugin won't update. Useful to fine-tune performance.

update.flowDirectionStyles

A function which returns a map of styles which influence the viewports flow direction or null if the default behavior shall be used. The default behavior reads the computed display, flexDirection, direction and writingMode styles of the viewport element.

This function can be used to skip or customize the expensive "non default flow direction" check: Use an empty style object to skip the check. Non-empty style objects will lead to a check when they change compared to the previously returned value.

Examples of styles which influence the flow direction:

• direction: rtl
• flexDirection: column-reverse
• writingMode: vertical-rl

overflow.x

Note: Valid values are: 'hidden', 'scroll', 'visible', 'visible-hidden' and 'visible-scroll'.

The overflow behavior for the horizontal (x) axis.

overflow.y

Note: Valid values are: 'hidden', 'scroll', 'visible', 'visible-hidden' and 'visible-scroll'.

The overflow behavior for the vertical (y) axis.

scrollbars.theme

Applies the specified theme (classname) to the scrollbars.

scrollbars.visibility

Note: Valid values are: 'visible', 'hidden', and 'auto'.

The visibility of a scrollbar if its scroll axis is able to have a scrollable overflow. (Scrollable overflow for an axis is only possible with the overflow behavior set to 'scroll' or 'visible-scroll').

scrollbars.autoHide

Note: Valid values are: 'never', 'scroll', 'leave' and 'move'.

Dictates whether to hide visible scrollbars automatically after a certain user action.

scrollbars.autoHideDelay

The delay in milliseconds before the scrollbars are automatically hidden.

scrollbars.autoHideSuspend

Suspend the autoHide functionality until the first scroll interaction is performed.
The default value for this option is false for backwards compatibility reasons but is recommended to be true for better accessibility.

scrollbars.dragScroll

Indicates whether you can drag the scrollbar handles for scrolling.

scrollbars.clickScroll

Note: The ClickScrollPlugin is required if this option is not false or 'instant'.

Indicates whether you can click on the scrollbar track for scrolling.

Can also be a function which customizes the click scroll behavior.

scrollbars.pointers

The PointerTypes the plugin should react to.

TypeScript

// The options of a OverlayScrollbars instance.
type Options = {
  // Whether the padding should be absolute.
  paddingAbsolute: boolean;
  // Whether to show the native scrollbars. Has effect only if the native scrollbars are overlaid.
  showNativeOverlaidScrollbars: boolean;
  // Customizes the automatic update behavior.
  update: {
    /**
     * The given Event(s) from the elements with the given selector(s) will trigger an update.
     * Useful for everything the MutationObserver and ResizeObserver can't detect
     * e.g.: An image's `load` event or the `transitionend` / `animationend` events.
     */
    elementEvents: Array<[elementSelector: string, eventNames: string]> | null;
    /**
     * Options to debounce updates to fine-tune performance.
     * It is possible to debounce updates caused by mutations, resizes, events and environmental changes.
     */
    debounce: {
      // Debounce updates which were triggered by a MutationObserver.
      mutation: OptionsDebounceValue;
      // Debounce updates which were triggered by a ResizeObserver.
      resize: OptionsDebounceValue;
      // Debounce updates which were triggered by a Event.
      event: OptionsDebounceValue;
      // Debounce updates which were triggered by environmental changes. (e.g. zooming & window resize)
      env: OptionsDebounceValue;
    };
    /**
     * HTML attributes which will trigger an update if they're changed.
     * Basic attributes like `id`, `class`, `style` etc. are always observed and don't have to be added explicitly.
     */
    attributes: string[] | null;
    // A function which makes it possible to ignore a content mutation or `null` if nothing should be ignored.
    ignoreMutation: ((mutation: MutationRecord) => boolean) | null;
    /**
     * A function which returns a map of styles which influence the viewports flow direction or `null` if the default behavior shall be used.
     * This function can be used to skip or customize the expensive "non default flow direction" check.
     */
    flowDirectionStyles:
      | ((viewport: HTMLElement) => Record<string, unknown>)
      | null;
  };
  // Customizes the overflow behavior per axis.
  overflow: {
    // The overflow behavior of the horizontal (x) axis.
    x: OverflowBehavior;
    // The overflow behavior of the vertical (y) axis.
    y: OverflowBehavior;
  };
  // Customizes appearance of the scrollbars.
  scrollbars: {
    // The scrollbar's theme. The theme value will be added as `class` to all `scrollbar` elements of the instance.
    theme: string | null;
    // The scrollbar's visibility behavior.
    visibility: ScrollbarsVisibilityBehavior;
    // The scrollbar's auto hide behavior.
    autoHide: ScrollbarsAutoHideBehavior;
    // The scrollbar's auto hide delay in milliseconds.
    autoHideDelay: number;
    // Whether the scrollbar's auto hide behavior is suspended until a scroll happened.
    autoHideSuspend: boolean;
    // Whether it is possible to drag the handle of a scrollbar to scroll the viewport.
    dragScroll: boolean;
    // Whether it is possible to click the track of a scrollbar to scroll the viewport.
    clickScroll: ScrollbarsClickScrollBehavior;
    // An array of pointer types that shall be supported.
    pointers: string[] | null;
  };
};

/**
 * If a tuple is provided you can customize the `timeout` and the `maxWait` in milliseconds. The third value `leading` indicates whether the debounce is also executed on the leading edge.
 * A single number customizes the `timeout` in milliseconds.
 * If the `timeout` is `0`, a debounce still exists. (its executed via `requestAnimationFrame`).
 */
type OptionsDebounceValue =
  | [
      timeout?: number | false | null | undefined,
      maxWait?: number | false | null | undefined,
      leading?: boolean | null | undefined,
    ]
  | number
  | false
  | null;

// The overflow behavior of an axis.
type OverflowBehavior =
  // No scrolling is possible and the content is clipped.
  | 'hidden'
  // No scrolling is possible and the content isn't clipped.
  | 'visible'
  // Scrolling is possible if there is an overflow.
  | 'scroll'
  /**
   * If the other axis has no overflow the behavior is similar to `visible`.
   * If the other axis has overflow the behavior is similar to `hidden`.
   */
  | 'visible-hidden'
  /**
   * If the other axis has no overflow the behavior is similar to `visible`.
   * If the other axis has overflow the behavior is similar to `scroll`.
   */
  | 'visible-scroll';

// The scrollbars visibility behavior.
type ScrollbarsVisibilityBehavior =
  // The scrollbars are always visible.
  | 'visible'
  // The scrollbars are always hidden.
  | 'hidden'
  // The scrollbars are only visibile if there is overflow.
  | 'auto';

// The scrollbars auto hide behavior
type ScrollbarsAutoHideBehavior =
  // The scrollbars are never hidden automatically.
  | 'never'
  // The scrollbars are hidden unless the user scrolls.
  | 'scroll'
  // The scrollbars are hidden unless the pointer moves in the host element or the user scrolls.
  | 'move'
  // The scrollbars are hidden if the pointer leaves the host element or unless the user scrolls.
  | 'leave';

// The scrollbar click scroll behavior.
type ScrollbarsClickScrollBehavior =
  | boolean
  | 'instant'
  | ((
      isHorizontal: boolean
    ) => Partial<ScrollbarsClickScrollBehaviorOptions> | false | null | undefined | void);

interface ScrollbarsClickScrollBehaviorOptions {
  // The scroll distance of the click scroll. If `0` the `clickScrollDistance` is the destination distance. Default: `one viewport unit`.
  clickScrollDistance: number;
  // The duration in milliseconds it takes to scroll the `clickScrollDistance`. Default `200`.
  clickScrollDuration: number;
  // The delay in milliseconds between click and press scroll. Default: `150`.
  clickPressDelay: number;
  // The duration in milliseconds it takes to travel one viewport unit during press scroll. Default: `90`.
  pressDistanceDuration: number;
}

Note: Every event receives the instance from which it was dispatched as the first argument. Always.

initialized

Dispatched after all generated elements, observers and events were appended to the DOM.

updated

Note: If an update was triggered but nothing changed, the event won't be dispatched.

Dispatched after the instance was updated.

destroyed

Dispatched after all generated elements, observers and events were removed from the DOM.

scroll

Dispatched by scrolling the viewport.

TypeScript

// A mapping between event names and their listener arguments.
type EventListenerArgs = {
  // Dispatched after all elements are initialized and appended.
  initialized: [instance: OverlayScrollbars];
  // Dispatched after an update.
  updated: [instance: OverlayScrollbars, onUpdatedArgs: OnUpdatedEventListenerArgs];
  // Dispatched after all elements, observers and events are destroyed.
  destroyed: [instance: OverlayScrollbars, canceled: boolean];
  // Dispatched on scroll.
  scroll: [instance: OverlayScrollbars, event: Event];
};

interface OnUpdatedEventListenerArgs {
  // Hints which describe what changed in the DOM.
  updateHints: {
    // Whether the size of the host element changed.
    sizeChanged: boolean;
    // Whether the direction of the host element changed.
    directionChanged: boolean;
    // Whether the intrinsic height behavior changed.
    heightIntrinsicChanged: boolean;
    // Whether the overflow edge (clientWidth / clientHeight) of the viewport element changed.
    overflowEdgeChanged: boolean;
    // Whether the overflow amount changed.
    overflowAmountChanged: boolean;
    // Whether the overflow style changed.
    overflowStyleChanged: boolean;
    // Whether the scroll coordinates changed.
    scrollCoordinatesChanged: boolean;
    // Whether an host mutation took place.
    hostMutation: boolean;
    // Whether an content mutation took place.
    contentMutation: boolean;
  };
  // The changed options.
  changedOptions: PartialOptions;
  // Whether the update happened with force-invalidated cache.
  force: boolean;
}

options(): Options

Get the current options of the instance.

options(newOptions, pure?): Options

Sets the current options of the instance.

on(eventListeners, pure?): Function

Adds event listeners to the instance.

on(name, listener): Function

Adds a single event listener to the instance.

on(name, listeners): Function

Adds multiple event listeners to the instance.

off(name, listener): void

Removes a single event listener from the instance.

off(name, listeners): void

Removes multiple event listeners from the instance.

update(force?): boolean

Updates the instance.

sleep(sleeping: boolean): void

Puts the instance to sleep or wakes it up.

When the instance is sleeping updates and (almost) all event listeners are ignored.

state(): State

Gets the instance's state.

elements(): Elements

Gets the instances elements.

destroy(): void

Destroys the instance and removes all added elements.

plugin(plugin: object): object | undefined

Gets the instance modules instance of the passed plugin.

TypeScript

// A simplified version of the OverlayScrollbars TypeScript interface.
interface OverlayScrollbars {
  // Get the current options of the instance.
  options(): Options;
  // Sets the current options of the instance.
  options(newOptions: PartialOptions, pure?: boolean): Options;

  // Adds event listeners to the instance.
  on(eventListeners: EventListeners, pure?: boolean): () => void;
  // Adds a single event listener to the instance.
  on<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>): () => void;
  // Adds multiple event listeners to the instance.
  on<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>[]): () => void;

  // Removes a single event listener from the instance.
  off<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>): void;
  // Removes multiple event listeners from the instance.
  off<N extends keyof EventListenerArgs>(name: N, listener: EventListener<N>[]): void;

  // Updates the instance.
  update(force?: boolean): boolean;

  // Puts the instance to sleep or wakes it up.
  sleep(sleeping: boolean): void;

  // Gets the instance's state.
  state(): State;

  // Gets the instance's elements.
  elements(): Elements;

  // Destroys the instance and removes all added elements.
  destroy(): void;

  // Gets the instance modules instance of the passed plugin.
  plugin<P extends InstancePlugin>(osPlugin: P): InferInstancePluginModuleInstance<P> | undefined;
}

// Describes a OverlayScrollbars instances state.
interface State {
  // Describes the current padding in pixels.
  padding: TRBL;
  // Whether the current padding is absolute.
  paddingAbsolute: boolean;
  // The client width (x) & height (y) of the viewport in pixels.
  overflowEdge: XY<number>;
  // The overflow amount in pixels.
  overflowAmount: XY<number>;
  // The css overflow style of the viewport.
  overflowStyle: XY<OverflowStyle>;
  // Whether the viewport has an overflow.
  hasOverflow: XY<boolean>;
  // The scroll coordinates of the viewport.
  scrollCoordinates: {
    // The start (origin) scroll coordinates for each axis.
    start: XY<number>;
    // The end scroll coordinates for each axis.
    end: XY<number>;
  };
  // Whether the direction is considered rtl.
  directionRTL: boolean;
  // Whether the instance is sleeping.
  sleeping: boolean;
  // Whether the instance is considered destroyed.
  destroyed: boolean;
}

// Describes the elements of a OverlayScrollbars instance.
interface Elements {
  // The element the instance was applied to.
  target: HTMLElement;
  // The host element. It's the root of all other elements.
  host: HTMLElement;
  /**
   * The element responsible for the correct padding.
   * Depending on initialization it can be the same as the viewport element.
   */
  padding: HTMLElement;
  // The element responsible of the scrolling.
  viewport: HTMLElement;
  /**
   * The element responsible for holding the actual content.
   * Depending on initialization it can be the same as the viewport element.
   */
  content: HTMLElement;
  /**
   * The element through which you can get the current `scrollLeft` or `scrollTop` offset.
   * Depending on the target element it can be the same as the viewport element.
   */
  scrollOffsetElement: HTMLElement;
  /**
   * The element through which you can add `scroll` events.
   * Depending on the target element it can be the same as the viewport element.
   */
  scrollEventElement: HTMLElement | Document;
  // The horizontal scrollbar's elements.
  scrollbarHorizontal: CloneableScrollbarElements;
  // The vertical scrollbar's elements.
  scrollbarVertical: CloneableScrollbarElements;
}

valid(osInstance): boolean

Checks whether the passed value is a valid and not destroyed overlayscrollbars instance

env(): Environment

Gets the environment.

nonce(newNonce): void

Sets the nonce attribute for inline styles.

trustedTypePolicy(newTrustedTypePolicy): void

Sets the trusted type policy.

plugin(plugin): object | undefined

Adds a single plugin.

plugin(plugins): (object | void)[]

Adds multiple plugins.

TypeScript

// The OverlayScrollbars static object.
interface OverlayScrollbarsStatic {
  // Gets the instance of the passed target or `undefined` the target has no instance.
  (target: InitializationTarget): OverlayScrollbars | undefined;
  // Initializes OverlayScrollbars to the passed target with passed options and event listeners.
  (target: InitializationTarget, options: PartialOptions, eventListeners?: EventListeners): OverlayScrollbars;

  // Checks whether the passed value is a valid and not destroyed overlayscrollbars instance.
  valid(osInstance: any): osInstance is OverlayScrollbars;

  // Gets the environment.
  env(): Environment;

  // Sets the nonce attribute for inline styles.
  nonce(newNonce: string | undefined): void;

  // Adds a single plugin.
  plugin(plugin: Plugin): InferStaticPluginModuleInstance<Plugin>
  // Adds multiple plugins.
  plugin(plugins: Plugin[]): InferStaticPluginModuleInstance<Plugin>[];
}

// Describes the OverlayScrollbars environment.
interface Environment {
  // The native scrollbars size of the browser / system.
  scrollbarsSize: XY<number>;
  // Whether the native scrollbars are overlaid.
  scrollbarsOverlaid: XY<boolean>;
  // Whether the browser supports native scrollbar hiding.
  scrollbarsHiding: boolean;
  // Whether the browser supports the ScrollTimeline API.
  scrollTimeline: boolean;
  // The default Initialization to use if nothing else is specified.
  staticDefaultInitialization: Initialization;
  // The default Options to use if nothing else is specified.
  staticDefaultOptions: Options;

  // Returns the current default Initialization.
  getDefaultInitialization(): Initialization;
  // Returns the current default Options.
  getDefaultOptions(): Options;

  /**
   * Sets a new default Initialization.
   * If the new default Initialization is partially filled, its deeply merged with the current default Initialization.
   * @param newDefaultInitialization The new default Initialization.
   * @returns The current default Initialization.
   */
  setDefaultInitialization(newDefaultInitialization: PartialInitialization): Initialization;
  /**
   * Sets new default Options.
   * If the new default Options are partially filled, they're deeply merged with the current default Options.
   * @param newDefaultOptions The new default Options.
   * @returns The current default options.
   */
  setDefaultOptions(newDefaultOptions: PartialOptions): Options;
}

Plugins are plain objects with a single field, the name of the field is the name of the plugin. This name is the plugin's identifier and must be unique across all plugins. In case multiple plugins have the same name, the last added plugin overwrites the plugin added previously under the same name.

Plugin Modules

A Plugin module is the constructor of a plugin module's instance. There are two kinds of plugin modules: static and instance. A single plugin must have one or more modules. A plugin module can return an instance, but doesn't have to.

Static Plugin Module

The static plugin module is invoked when the plugin is added with the OverlayScrollbars.plugin function.

Example plugin with a static module:

const staticPlugin = {
  // Plugin has the name `examplePlugin`.
  examplePlugin: {
    // The `static` function describes a static module and returns the module instance or void / undefined if no instance is needed.
    // The `osStatic` parameter is the global `OverlayScrollbars` object.
    static: (osStatic) => {
      let count = 0;
      const staticPluginModuleInstance = {
        getCount: () => count,
        increment: () => { count++ },
      }
      return staticPluginModuleInstance;
    }
  }
}

When the plugin is added with the OverlayScrollbars.plugin function, the static module instance is returned:

const staticModuleInstance = OverlayScrollbars.plugin(staticPlugin); // Plugins static module is invoked
staticModuleInstance.count; // 0
staticModuleInstance.increment();
staticModuleInstance.count; // 1

Instance Plugin Module

The instance plugin module is invoked when a new OverlayScrollbars instance is created but before the initialized event is dispatched.

Example plugin with a instance module:

const instancePlugin = {
  // Plugin has the name `examplePlugin`.
  examplePlugin: {
    // Instance function describes na instance module and returns the module instance or void / undefined if no instance is needed.
    // The `osInstance` parameter is the OverlayScrollbar instance the plugin is bound to.
    // The `event` parameter is a function which adds events to the instance which can't be removed from outside the plugin.
    // The `osStatic` parameter is the global OverlayScrollbar object.
    instance: (osInstance, event, osStatic) => {
      let count = 0;

      const instancePluginModuleInstance = {
        getCount: () => count,
        increment: () => { count++ },
      }

      // Event which fires when the instance was initialized.
      event('initialized', () => {
        console.log("instance initialized");
      });

      // Event which fires when the viewport was scrolled.
      const removeScrollEvent = event('scroll', () => {
        console.log("viewport scrolled");
        removeScrollEvent(); // Removes the event after the first scroll.
      });
      
      return instancePluginModuleInstance;
    }
  }
}

When the plugin is added with the OverlayScrollbars.plugin function, all OverlayScrollbar instances will automatically add the plugin from that point on. Previously created instances will not have the plugin. The instance module instance is returned with the osInstance.plugin function:

OverlayScrollbars.plugin(instancePlugin); // Plugin is added

const osInstance = OverlayScrollbars(document.body, {}); // Plugin's instance module is invoked
const instancePluginInstance = osInstance.plugin(instancePlugin);

instancePluginInstance.count; // 0
instancePluginInstance.increment();
instancePluginInstance.count; // 1

TypeScript

// Describes a OverlayScrollbar plugin.
type Plugin<
  // The name of the plugin.
  Name extends string = string,
  // The module instance type of the static module.
  S extends PluginModuleInstance | void = PluginModuleInstance | void, 
  // The module instance type of the instance module.
  I extends PluginModuleInstance | void = PluginModuleInstance | void 
> = {
  [pluginName in Name]: PluginModule<S, I>;
};

// Describes a OverlayScrollbar plugin which has only a static module.
type StaticPlugin<
  Name extends string = string,
  T extends PluginModuleInstance = PluginModuleInstance
> = Plugin<Name, T, void>;

// Describes a OverlayScrollbar plugin which has only a instance module.
type InstancePlugin<
  Name extends string = string,
  T extends PluginModuleInstance = PluginModuleInstance
> = Plugin<Name, void, T>;

// Infers the type of the static module's instance of the passed plugin.
type InferStaticPluginModuleInstance<T extends StaticPlugin>;

// Infers the type of the instance modules instance of the passed plugin.
type InferInstancePluginModuleInstance<T extends InstancePlugin>;

If you applied OverlayScrollbars to the body element you can use window.scrollX, window.scrollY, window.scroll, window.scrollTo, window.scrollBy or any other native api.

If the plugin was applied to any other element you have to get the viewport element with the instance.elements() function first. With this element you can use element.scrollTop, element.scrollLeft, element.scroll, element.scrollTo, element.scrollBy or any other native api.

const { viewport } = osInstance.elements();
const { scrollLeft, scrollTop } = viewport; // Get scroll offset
viewport.scrollTo({ top: 0 }); // Set scroll offset

You can adjust a scrollbar's handle length by setting a min-width / min-height and max-width / max-height style:

/* horizontal boundaries */
.os-scrollbar-horizontal .os-scrollbar-handle {
  min-width: 50px;
  max-width: 200px;
}
/* vertical boundaries */
.os-scrollbar-vertical .os-scrollbar-handle {
  min-height: 40px;
  max-height: 40px;
}

You can assign the same value to both properties to force the scrollbar to be always the same size.
Setting the width and height properties won't work since those are set by the plugin automatically.