OverlayScrollbars

OverlayScrollbars is a javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

Why

I've created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.

Goals & Features

Simple, powerful and good documented API
High browser compatibility - Firefox, Chrome, Opera, Edge, Safari 10+ and IE 11
Tested on various devices - Mobile, Desktop and Tablet
Tested with various (and mixed) inputs - Mouse, touch and pen
Plugin based features with Treeshaking - bundle only what you really need
Automatic update detection - no polling
Usage of latest browser features - best performance in new browsers
Bidirectional - LTR or RTL direction support
Simple and effective scrollbar styling
TypeScript support - fully written in TypeScript

Getting started

npm & Node

OverlayScrollbars can be downloaded from npm or the package manager of your choice:

npm install overlayscrollbars

After installation it can be imported:

import 'overlayscrollbars/overlayscrollbars.css';
import { OverlayScrollbars } from 'overlayscrollbars';

Manual download & embedding

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>

Initialization

Note

During initialization its expected that the CSS file is loaded and parsed by the browser.

You can initialize either directly with an Element or with an Object where you have more control over the initialization process.

// simple initialization with an element
const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});

Initialization with an Object

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'),
 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 now also decide to which element the scrollbars should be applied to:

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

And last but not least you can decide when the library should cancel its initialization:

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

With this cancel object 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.

README.md

Why