Main Features

Custom design & native functionality

The plugin combines the features of native scrolling
(e.g. hotkeys, speed, smoothness, touchsupport etc.) and custom HTML & CSS. It does not replace the native scrollbars, it just hides them to guarantee 100% native scrolling. It also provides additional and highly customizable DOM elements to style your own scrollbars.
To check how flexible the styling is, take a look at the examples in the styling demo.

Supports all css size affecting properties

Supported are all size properties (width, height, max-*, min-*)
with all units (em, ex, %, px, cm, mm, in, pt, pc, rem).
Even height: auto and width: auto in combination with min-* and max-* size properties. Floating elements in combination with width: auto are supported too. The best thing is, any size, padding, margin or border-width changes are detected automatically by the plugin. Please use the capabilities demo to convince yourself.

Extended support for textarea elements

Textarea elements have extended support. Dependent on your options, textareas can have dynamic width and height. Which means the size of the textarea is dependent of its content. For more information please read the documentation to the textarea options or check out the textarea demo. No-auto-wrapping (wrap="off") textareas are also supported.

Extended RTL support

Every browser handles RTL scrolling differently. The plugin leaves it up to you whether you want to use the native RTL scroll behavior which differs in each browser or a "normalized" RTL scroll behavior, which works the same way in every browser.

Extremely powerful scroll method

The plugin offers a scroll method which supports animated scrolling. With this method you can scroll to absolute, relative and calculated coordinates. It's also possible to scroll directly to a passed DOM element. Furthermore it provides the same functionality as the native scrollIntoView method. Try the demo or read the documentation for more info.

Supports Extensions for simple customization

In case OverlayScrollbars doesn't support a feature you need, you are able to develop or use extensions. Extensions provide additional functionality to the plugin, to support special or personal cases. The extension-system is simple and powerful. Please read the documentation for more info and check the extensions page to see all official extensions.

Using modern web technologies

The Web has many useful tools which are only supported in modern browsers. The plugin is using them in modern browsers to ensure maximum performance but uses fallbacks in older browsers to ensure functionality.

Able to hide all types of scrollbars

Similar plugins are not able to hide natively overlaid scrollbars. These are standard on all mobile browsers as well as on many Linux operating systems and MacOS.
Moreover it's even possible to hide mixed scrollbars (e.g. vertical scrollbar is overlaid and horizontal isn't) but this case can only happen if your browser is using some skin or theme plugins.

No clipping without overflow

As long as there is no overflow, the element is not clipped. The clip appears only if a overflow exists. You can not achieve this with CSS because all overflow values except of overflow: visible clips the element even if the element has no overflow.

Component wrapper for popular frameworks

If you are using popular component-based web front-end frameworks such as React, Vue or Angular, you can use the corresponding component wrapper.

Sub Features

Options can be changed at runtime.
Supports horizontal and / or vertical scrollbars.
Free adjustable handle size.
Selectable & searchable content.
Support for box-sizing: border-box and box-sizing: content-box.
Two different padding variants.
Ability to completely ignore the overflow of a specified axis.
Provides callbacks for any situation.
You can use the plugin without any dependencies or with jQuery.
Provides actively maintained TypeScript declarations.

Browser Support

Tested on desktop and mobile browsers as well as on Windows and Linux machines.

Internet Explorer

Edge

Opera

Chrome

Firefox

Safari

8+

Yes

6+

Implementation

You can get the plugin by downloading it manually, via cdn or via a package manager like npm:

npm install overlayscrollbars

The plugin has two versions:

The default version without any dependencies: OverlayScrollbars.js
The jQuery version with jQuery as dependency: jquery.overlayScrollbars.js

Both versions are capable of the same, but the jQuery version is a bit smaller in size.

To implement the plugin to your page you have to include all necessary files to the head tag in your HTML document.
If you are using jQuery, please use the file prefixed with jquery..

Make sure to load all CSS file(s) before the JS file(s), to prevent unexpected bugs.

Default

jQuery

<html>
    <head>
        <!-- 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>
    </head>
    <body>
    </body>
</html>

<html>
    <head>
        <!-- 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>
    </head>
    <body>
    </body>
</html>

The plugin is now ready to be initialized.

Initialize the plugin only after your document has been fully loaded.

Default

jQuery

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"), { });
});

For further and more detailed information about the initialization and the initialization possibilities please read this section in the documentation.

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

For further and more detailed information about the initialization and the initialization possibilities please read this section in the documentation.

TypeScript

Although OverlayScrollbars isn't written in TypeScript, it provides its own TypeScript declarations:

npm install @types/overlayscrollbars

I recommend setting these options in your tsconfig.json:

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

Component Wrapper

OverlayScrollbars provides its own wrapper components for popular component-based front-end frameworks. Each wrapper is written in TypeScript and actively maintained.

React

Vue

Angular

Limitations

The plugin was tested with great care on many different devices and browsers. The only bug which I've found was on Safari on iOS (i.e. mobile Safari) where sometimes native scrollbars will appear if you've applied the plugin to the body element. I wasnt able to fix this bug until now, because Safari seems to act strange since everything works on Chrome and other mobile browsers.

If you find a bug, any strange or maybe unintended behavior, please open a issue on github.

License

MIT License

Epilogue

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.

This project required very much time and research and I'm very proud that I've managed to implement everything I wanted to. Nonetheless there will be enhancements in the future, either because of the community (bugs and requests) or because of me and my perfectionism. Browsers will evolve too over time and I'll do my best to use always the most recent technologies to ensure maximum efficiency and performance.

The future plans are:

Minimize the code as much as possible.
Frequent updates in terms of bug-fixes and enhancements.
Enhancements on this page to provide the best possible documentation and presentation.

If you like my work and want to support me, feel free to leave me a small donation. You'll definitely make my day. Donate