OverlayScrollbars is a javascript scrollbar plugin which 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

• A simple, powerful and good documented API.
• High browser compatibility (IE8+, Safari6+, Firefox, Opera, Chrome and Edge).
• Usage of the most recent technologies to ensure maximum efficiency and performance on newer browsers.
• Can be used without any dependencies or with jQuery.
• Automatic update detection - after the initialization you don't have to worry about updating.
• Extremely powerful scroll method with features like animations, relative coordinates, scrollIntoView and more.
• Mouse and touch support.
• Textarea and Body support.
• RTL Direction support. (with normalization)
• Simple and effective scrollbar-styling.
• Rich extension system.
• TypeScript support.

Framework Wrapper

OverlayScrollbars provides its own wrapper components for popular component-based front-end frameworks:

README

npm install overlayscrollbars-react

README

npm install overlayscrollbars-vue

README

npm install overlayscrollbars-ngx

Sponsors

Dependencies

The default version doesn't requires any dependencies!

If you are using the jQuery dependent version it obviously requires jQuery to work.
It was tested with the jQuery versions: 1.9.1, 2.x, 3.x, and it won't work with jQuery slim.

Download

manually

Download OverlayScrollbars manually from Releases.

cdn

You can use OverlayScrollbars via a cdn.

npm

OverlayScrollbars can be downloaded from npm.

npm install overlayscrollbars

Usage

HTML

Load your CSS file(s) before the JS file(s), to prevent unexpected bugs.

Include OverlayScrollbars.css and OverlayScrollbars.js to your HTML file.

<!-- Plugin CSS -->
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
<!-- Plugin JS -->
<script type="text/javascript" src="path/to/OverlayScrollbars.js"></script>

If you are using the jQuery version, include jQuery before the plugin and use jquery.overlayScrollbars.js

<!-- Plugin CSS -->
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
<!-- jQuery JS -->
<script type="text/javascript" src="path/to/jquery.js"></script>
<!-- Plugin JS -->
<script type="text/javascript" src="path/to/jquery.overlayScrollbars.js"></script>

JavaScript

Initialize the plugin after your document has been fully loaded.

Default initialization:

document.addEventListener("DOMContentLoaded", function() {
    //The first argument are the elements to which the plugin shall be initialized
    //The second argument has to be at least a empty object or a object with your desired options
    OverlayScrollbars(document.querySelectorAll('body'), { });
});

jQuery initialization:

$(function() {
    //The passed argument has to be at least a empty object or a object with your desired options
    $('body').overlayScrollbars({ });
});

TypeScript

OverlayScrollbars provides its own TypeScript declarations:

npm install @types/overlayscrollbars

I recommend setting these options in your tsconfig.json:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true
    }
}

Options

Due to clarity I can't provide all informations here.
Take the table below only as a overview of all options.
Please read the much more detailed documentation.

Methods

Click on the method name to open a more detailed documentation.

Instance methods:

Global methods:

Tests

It's a challenge to fully test a library like OverlayScrollbars, because it has to adapt to countless DOM setups and browsers. Nevertheless I've developed basic GUI-Tests. In these tests a element with applied OverlayScrollbars is compared to a native element.

You can run the tests by visiting this page and clicking on the Run button. Please be aware that the tests need some time to complete. After the process is complete, the results are displayed in the console.

In case some tests are failing on your end, please open a issue with the console output of the tests (the failed array in particular).

Future Plans

• Minimize the code as much as possible.
• Frequent updates in terms of bug-fixes and enhancements.
• Improve tests

License

MIT