KingSora / Overlayscrollbars

Website   •   Documentation   •   Demos   •   Extensions   •   FAQ

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

Thanks to BrowserStack for sponsoring open source projects and letting me test OverlayScrollbars for free.

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:

//get options
var options = instance.options();
//set options
instance.options({ className : null });

//soft update
instance.update();
//hard update
instance.update(true);

//put the instance to sleep
instance.sleep();

//get scroll information
var scrollInfo = instance.scroll();
//scroll 50px on both axis
instance.scroll(50);
//add 10px to the scroll offset of each axis
instance.scroll({ x : "+=10", y : "+=10" });
//scroll to 50% on both axis with a duration of 1000ms
instance.scroll({ x : "50%", y : "50%" }, 1000);
//scroll to the passed element with a duration of 1000ms
instance.scroll($(selector), 1000);

//scroll-animation duration is 10 seconds
instance.scroll({ y : "100%" }, 10000);
//abort the 10 seconds scroll-animation immediately
instance.scrollStop();
//scroll-animation duration is 1 second
instance.scroll({ y : "100%" }, 1000);

//get the element to which the plugin was applied
var pluginTarget = instance.getElements().target;

//get the state of the plugin instance
var pluginState = instance.getState();

//destroy the instance
instance.destroy();

//get the instance of the extension "myExtension"
var extensionInstance = instance.ext("myExtension");

//add the registered extension "myExtension" to the plugin instance
var extensionInstance = instance.addExt("myExtension");

//add the registered extension "myExtension" to the plugin instance
instance.addExt("myExtension");
//remove the added extension "myExtension" from the plugin instance
instance.removeExt("myExtension");

Global methods:

//get the current defaultOptions
var defaultOptions = OverlayScrollbars.defaultOptions();
//set new default options
OverlayScrollbars.defaultOptions({
    className : "my-custom-class",
    resize    : "both"
});

//get the global information
var globals = OverlayScrollbars.globals();

//register a dummy extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", function() { return { }; });
//unregister the extension with the name "myExtension"
OverlayScrollbars.extension("myExtension", null);
//get the extension-object with the name "myExtension"
var registeredExtension = OverlayScrollbars.extension("myExtension");
//get all registered extension-objects
var extensionObjects = OverlayScrollbars.extension();

//create OverlayScrollbars instance
var osInstance = OverlayScrollbars(document.body, { });
//returns true
OverlayScrollbars.valid(osInstance);
//destroy the instance
osInstance.destroy();
//returns false
OverlayScrollbars.valid(osInstance);
//returns false
OverlayScrollbars.valid({ });

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