You can use OverlayScrollbars without any bundler or package manager.
Simply download it from the Releases or use a CDN.

• Use the javascript files with the .browser extension.
• If you target old browsers use the .es5 javascript file, for new browsers .es6.
• For production use the javascript / stylesheet files with the .min extension.

Embedd OverlayScrollbars manually in your HTML:

<link type="text/css" href="path/to/overlayscrollbars.css" rel="stylesheet" />
<script type="text/javascript" src="path/to/overlayscrollbars.js" defer></script>

Note: For now please refer to the TypeScript definitions for a more detailed description of all possibilities.

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

// Both initializations have the same outcome

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

In the initialization object you can specify how the library is handling generated elements. For example you can appoint an existing element as the viewport element. Like this the library won't generate it but take 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 generate its own elements. Those cases arise very often when you want an other library to work together 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,
 },
}, {});

And last but not least you can decide when the initialization should be canceled:

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

In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a body element and the plugin determined that a initialization to the body element would affect native functionality like window.scrollTo.

The default options are:

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

Indicates whether the padding for the content shall be absolute.

Indicates whether the native overlaid scrollbars shall be visible.

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 will emit any specified event. The default value can be interpreted as "The plugin will update itself if any img element emits an load event."

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

Debounces the MutationObserver which tracks changes to the content. If a tuple is passed, the first value is the timeout and second is the max wait. If only a number is passed you specify only the timeout and there is no max wait. With null there is no debounce. Usefull to fine-tune performance.

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 for the content.

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. Usefull to fine-tune performance.

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

The overflow behavior for the horizontal (x) axis.

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

The overflow behavior for the vertical (y) axis.

Applies the specified theme (classname) to the scrollbars.

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

The base visibility of the scrollbars.

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

The possibility to hide visible scrollbars automatically after a certain user action.

The delay in milliseconds before the scrollbars are hidden automatically.

Indicates whether you can drag the scrollbar handles for scrolling.

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

The PointerTypes the plugin should react to.

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

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

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

Is fired after the instace was updated.

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